Hello. Kind of a complex one. I’m trying to nest (not sure if that’s the right word) a slider entity row card into a button card to be able to toggle a light and control it’s brightness all in one concise card.
I got the below card working but there’s one small hiccup. I need to recolor the slider-entity row card. I dropped in card mod code (which works fine outside of the button card), but once nested, it doesn’t work.
I’ve ran out of things to try and fix it. Any suggestions?
type: custom:button-card
name: Recess Lights
entity: light.living_room_lights
icon: mdi:light-recessed
show_icon: true
styles:
card:
- height: 150px
- border-radius: 15px
- font-size: 10px
- padding-bottom: 0px
- padding-top: 0px
- position: relative
img_cell:
- align-self: center
- text-align: left
- justify-content: start
grid:
- grid-template-areas: "\"i badge\" \"n n\" \"slider slider\" \"l l\""
- grid-template-columns: 1fr auto
- grid-template-rows: min-content fr min-content min-content
name:
- justify-self: left
- font-weight: 600
- font-size: 16px
- padding-top: 5px
- padding-left: 20px
- padding-bottom: 9px
icon:
- justify-self: start
- padding-top: 5px
- padding-left: 30px
- width: 70px
custom_fields:
slider:
- width: 90%
- margin-left: 5%
- align-items: center
- justify-content: space-between
- font-size: 16px
- margin-right: "-10px"
badge:
- position: absolute
- top: 5px
- right: 30px
- width: 5px
state:
- value: "off"
styles:
card: null
icon: null
- value: "on"
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: "#FF9500"
name:
- color: black
state:
- color: black
custom_fields:
slider:
card:
entity: light.living_room_lights
type: custom:slider-entity-row
full_row: true
toggle: false
hide_state: true
step: 10
card_mod:
style: |
ha-slider {
--md-sys-color-primary: orange;
--_active-track-color: orange;
--_inactive-track-color: black;
--_handle-color: orange;
--_hover-handle-color: orange;
}
badge:
card:
type: custom:button-card
icon: si:zigbee
show_name: false
show_state: false
entity: light.living_room_lights
styles:
card:
- width: 30px
- height: 30px
- background: transparent
icon:
- width: 20px
- height: 20px
state:
- value: "off"
styles:
icon:
- color: "#D3D3D3"
- value: "on"
styles:
icon:
- color: black
The card itself looks like this:
