Simple light with slider

type: custom:button-card
entity: light.hue_color_lamp_2
tap_action:
  action: more-info
show_icon: false
name: Light 1
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: light.hue_color_lamp_2
      colorMode: brightness
      styles:
        container:
          - border-radius: 100px
          - overflow: visible
          - background: none
        card:
          - height: 40px
          - padding: 0 20px
          - background: |
              [[[
                if (
                  entity.state === 'on' &&
                  entity.attributes.rgb_color &&
                  entity.attributes.brightness > 0
                ) {
                  let [r, g, b] = entity.attributes.rgb_color;
                  // Calculate a dynamic gradient based on the light's RGB colour
                  let darkR = Math.min(255, Math.floor(r * 0.6));
                  let darkG = Math.min(255, Math.floor(g * 0.6));
                  let darkB = Math.min(255, Math.floor(b * 0.6));
                  let lightR = Math.min(255, Math.floor(r * 1.3));
                  let lightG = Math.min(255, Math.floor(g * 1.3));
                  let lightB = Math.min(255, Math.floor(b * 1.3));
                  return `linear-gradient(to right, rgb(${darkR}, ${darkG}, ${darkB}), rgb(${lightR}, ${lightG}, ${lightB}))`;
                }
                // Fallback plain colour when off
                return "#4e4457";
              ]]]
          - transition: background 0.5s ease-in-out
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (
                  entity.state === 'on' &&
                  entity.attributes.rgb_color &&
                  entity.attributes.brightness > 0
                ) {
                  let [r, g, b] = entity.attributes.rgb_color;
                  // Darken the base colour significantly for the thumb
                  let dr = Math.floor(r * 0.3);
                  let dg = Math.floor(g * 0.3);
                  let db = Math.floor(b * 0.3);
                  return `rgb(${dr}, ${dg}, ${db})`;
                }
                // Fallback thumb colour when off
                return "#393646";
              ]]]
          - top: 2px
          - right: "-18px"
          - height: 36px
          - width: 36px
          - border-radius: 100px
styles:
  grid:
    - grid-template-areas: "\"n\" \"slider\""
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - background: |
        [[[
          if (
            entity.state === 'on' &&
            entity.attributes.rgb_color &&
            entity.attributes.brightness > 0
          ) {
            let [r, g, b] = entity.attributes.rgb_color;
            // Calculate a dynamic overall card background gradient
            let darkR = Math.min(255, Math.floor(r * 0.4));
            let darkG = Math.min(255, Math.floor(g * 0.4));
            let darkB = Math.min(255, Math.floor(b * 0.4));
            let darkerR = Math.min(255, Math.floor(r * 0.5));
            let darkerG = Math.min(255, Math.floor(g * 0.5));
            let darkerB = Math.min(255, Math.floor(b * 0.5));
            return `linear-gradient(to right, rgb(${darkR}, ${darkG}, ${darkB}), rgb(${darkerR}, ${darkerG}, ${darkerB}))`;
          }
          // Fallback plain colour when off
          return "#393646";
        ]]]
    - padding: 16px
    - "--mdc-ripple-press-opacity": 0
    - transition: background 0.5s ease-in-out
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 12px 0
    - color: var(--contrast20)