Custom Button Card Configuration Help

Hey All,

So I have a great custom button card that I use for switches and other plugs in my home assistant and I’m wanting to do something similar for my main lights, but have a brightness slider so I can adjust the brightness of the main lights in each room.

Here is what my switch card config is along with a photo;

type: custom:button-card
entity: switch.living_room_lamp
name: Lamp
show_icon: false
styles:
  card:
    - border-radius: 25px
    - border-style: none
    - box-shadow: 0px 0px 10px -9px black
    - background-color: |
        [[[
          return states['switch.living_room_lamp'].state === 'on' ? '#CEF595' : '';
        ]]]
  grid:
    - grid-template-areas: '"icon_cells" "n" "button"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  custom_fields:
    icon_cells:
      - justify-self: start
      - margin-top: 12px
      - margin-left: 15px
  name:
    - font-size: 90%
    - font-weight: bold
    - justify-self: start
    - margin-top: 6px
    - margin-left: 15px
    - color: |
        [[[
          return states['switch.living_room_lamp'].state === 'on' ? '#000000' : 'grey';
        ]]]
custom_fields:
  icon_cells: |

    [[[
           var state = states['switch.living_room_lamp'].state;
           if(state == "on")
            return `<ha-icon
            icon="mdi:lamp"
            style="width: 25px; height: 25px; color: black;">
            </ha-icon>
            `;
           else 
            return `<ha-icon
            icon="mdi:lamp-outline"
            style="width: 25px; height: 25px; color: grey;">
            </ha-icon>
            `;
          ]]]
  button:
    card:
      type: custom:button-card
      entity: switch.living_room_lamp
      show_icon: false
      show_name: false
      styles:
        card:
          - border-style: none
          - margin-top: '-4%'
          - margin-bottom: '-5%'
          - background-color: transparent
        grid:
          - grid-template-areas: '"state icon_cells"'
          - grid-template-columns: min-content 1fr
          - grid-template-rows: min-content
        custom_fields:
          state:
            - justify-self: start
            - align-self: middle
            - font-size: 12px
            - filter: opacity(50%)
            - margin-left: 15px
            - margin-top: 1.6px
          icon_cells:
            - justify-self: end
            - align-self: start
            - margin-right: 15px
            - width: 45px
      custom_fields:
        icon_cells: |
          [[[
           var state = states['switch.living_room_lamp'].state;
           if(state == "on")
            return `<ha-icon
            icon="mdi:toggle-switch"
            style="color: #000000;">
            </ha-icon>
            `;
           else 
            return `<ha-icon
            icon="mdi:toggle-switch-off"
            style="color: grey;">
            </ha-icon>
            `;
          ]]]
        state: |
          [[[
            var state = states['switch.living_room_lamp'].state
            var power = states['sensor.media_centre_power'].state
           if(state == "on")
            return `<span style="color: black;">On</span>
            `;
           else 
            return `<span style="color: grey;">Off</span>
            `;
          ]]]

image
image

I have this slider card from the rounded theme but when you put the two together side-by-side they’re not the same height and looks odd, and would prefer to use the code above for the main part of my code, and then have the slider in place where the button switch and state status is.

type: custom:button-card
name: Main Light
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.living_room_light_switch
tap_action:
  action: toggle
  haptic: medium
hold_action:
  action: more-info
  haptic: medium
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: '[[[ return entity.entity_id ]]]'
      colorMode: brightness
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 16px
          - padding: 0 8px
          - background: |
              [[[
                if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
                else return "var(--contrast4)";
              ]]]
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (entity.state == "on") return "var(--black)";
                if (entity.state == "off") return "var(--contrast20)";
                else return "var(--contrast8)";
              ]]]
          - top: 2px
          - right: '-8px'
          - height: 12px
          - width: 12px
          - border-radius: 10px
styles:
  grid:
    - grid-template-areas: '"i" "n" "slider"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - background: var(--contrast2)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 24px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  icon_cells:
    - justify-self: start
    - margin-top: 12px
    - margin-left: 15px
  name:
    - justify-self: start
    - font-size: 90%
    - margin: 4px 0 12px 0
    - color: var(--contrast8)
    - font-weight: bold
state:
  - value: 'on'
    styles:
      card:
        - background: |
            [[[
                var color = entity.attributes?.rgb_color;
                if (entity.state != "on"){
                  return 'var(--contrast20)';
                }
                else if (color){
                  return 'rgba(' + color + ')'
                }
                else{
                  return 'var(--yellow)'
                }
            ]]]
      icon:
        - color: var(--black)
      name:
        - color: var(--black)
  - value: 'off'
    styles:
      icon:
        - color: var(--contrast20)
      name:
        - color: var(--contrast20)

Could someone educate me on adding in the custom-slider-v2 into the first code set so that the card themselves are the same height, whilst maintaining the slider functionality. Plus any other ideas of adding stuff to the card would be appreciated.

Many thanks

Okay, I now feel a little silly posting this, but I managed to resolve it by adding in a height line for 100% so it’s now working, however, I’d like to be able to see the brightness value somewhere on the card.

Any ideas on how to achieve that? Here’s my new code;

type: custom:button-card
name: Main Light
show_icon: false
entity: light.living_room_light_switch
tap_action:
  action: toggle
  haptic: medium
hold_action:
  action: more-info
  haptic: medium
custom_fields:
  icon_cells: |

    [[[
           var state = states['light.living_room_light_switch'].state;
           if(state == "on")
            return `<ha-icon
            icon="mdi:ceiling-light"
            style="width: 30px; height: 30px; color: black;">
            </ha-icon>
            `;
           else 
            return `<ha-icon
            icon="mdi:ceiling-light-outline"
            style="width: 30px; height: 30px; color: grey;">
            </ha-icon>
            `;
          ]]]
  slider:
    card:
      type: custom:my-slider-v2
      entity: '[[[ return entity.entity_id ]]]'
      colorMode: brightness
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 16px
          - padding: 0 8px
          - background: |
              [[[
                if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
                else return "var(--contrast4)";
              ]]]
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (entity.state == "on") return "var(--black)";
                if (entity.state == "off") return "var(--contrast20)";
                else return "var(--contrast8)";
              ]]]
          - top: 2px
          - right: '-8px'
          - height: 12px
          - width: 12px
          - border-radius: 10px
styles:
  grid:
    - grid-template-areas: '"icon_cells" "n" "state" "slider"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  custom_fields:
    icon_cells:
      - justify-self: start
  card:
    - background: var(--contrast2)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
    - height: 100%
  img_cell:
    - justify-self: start
    - width: 24px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  icon_cells:
    - justify-self: start
    - margin-top: 12px
    - margin-left: 15px
  name:
    - justify-self: start
    - font-size: 90%
    - margin: 4px 0 12px 0
    - color: var(--contrast8)
    - font-weight: bold
state:
  - value: 'on'
    styles:
      card:
        - background: |
            [[[
                var color = entity.attributes?.rgb_color;
                if (entity.state != "on"){
                  return 'var(--contrast20)';
                }
                else if (color){
                  return 'rgba(' + color + ')'
                }
                else{
                  return 'var(--yellow)'
                }
            ]]]
      name:
        - color: var(--black)
  - value: 'off'
    styles:
      name:
        - color: grey