Slider-entity-row in a Button-card

[OilSells]

Hello there.

I’m trying to add a slider-entity-row inside a button-card and its not a big deal. The only problem is that the slider is stuck at the bottom of the card when it needs to occupy the entire of it.

Here’s the code:

cards:
  - cards:
      - entity: light.suite22_bathroom_mirror
        icon: 'mdi:mirror'
        name: Mirror
        size: 30px
        type: 'custom:button-card'
      - entity: light.suite22_bathroom_shower
        icon: 'mdi:spotlight-beam'
        name: Shower
        size: 30px
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - entity: light.suite22_bathroom_jacuzzi
        icon: 'mdi:wall-sconce-flat'
        name: Jacuzzi
        size: 30px
        custom_fields:
          slider:
            card:
              full_row: true
              hide_state: true
              type: 'custom:slider-entity-row'
              entity: light.suite22_bathroom_jacuzzi
            overflow: unset
        type: 'custom:button-card'
    type: horizontal-stack
title: Bathroom
color: black
type: vertical-stack

I also came across this post, which has the same problem, but I use its settings and it’s still the same for me. Maybe because of the size of the card, i really dont know.

Customize slider-entity-row

Hi! I have merged two cards (slider-entity-row and button-card) by using vertical-stack-in-card. I have then customized slider-entity-row (color) with card-mod. What I would like to do is modify the slider-entity-row further to reduce its height and change color of the slider and knob. Any ideas on how to do that? I have localized some ha and var elements in the browser, could they be used? [image] [image] [image]

If anyone knows a way to solve this, I would be completely grateful.

[petro]

you need to add the custom field to the grid, otherwise it defaults to outside the grid (which happens to be the lower right corner).

      - entity: light.suite22_bathroom_jacuzzi
        icon: 'mdi:wall-sconce-flat'
        name: Jacuzzi
        size: 30px
        styles:
          grid:
          - grid-template-areas: '"i" "n" "slider"'
          - grid-template-columns: 100%
          - grid-template-rows: min-content min-content 1fr
        custom_fields:
          slider:
            card:
              full_row: true
              hide_state: true
              type: 'custom:slider-entity-row'
              entity: light.suite22_bathroom_jacuzzi
            overflow: unset
        type: 'custom:button-card'

[OilSells]

Yes, it was more easy than i thought, thank you so much!