Strange issue…
When the light is off, the state is hidden (eg no ‘Off’ in the button)
But when the light is on, it shows correctly the dim percentage.
Does anyone know how I can resolve this, so it shows the ‘Off’ state?
I’m running on HA 2023.7.3
This bug is present since a while now, I believe this bug was introduced with an update in 2023.4.x update. I still am on that version (since many things on frontend broke after 2023.5 and I need time to resolve those changes before updating). But I can confirm this is an old bug, that I think happened because of yet again new frontend changes with 2023.4.x somewhere.
Thanks for your answer!
Hopefully someone can fix the slider button code, so we can use it in the current HA versions.
Sadly I don’t have enough coding skills to fix it myself.
First of all: I love this!
But how do i customise it so the background has a slight of opacity?
I want background when state is “on” to be white with opacity :: rgba(255,255,255,0.3)
and when state is “off” to be black with opacity :: rgba(0,0,0,0.3)
Hope someone can help me 
Looking for some expertise and/or suggestions. It seems my slider button cards are not reflecting the correct color in the on state compared to other cards i.e. entity card. I have a white LED strip which shows the correct on state color of white, while the slider button shows the default color. Changing use_state_color makes no difference. (see below as examples: Slider Card vs. Entity Card)
Trying to get this working but can’t make the slider-track transparent.
I see the background image behind but the slider-track remains white instead of transparent.
also tried rgba(0,0,0,0), no success.
@HellfireZA did you manage to make this work ?
@lizsugar anything else I could try vs below or maybe some typo (newbie here).
Thx
square: true
type: grid
cards:
- type: custom:slider-button-card
entity: cover.zemismart_zm25tq_1
slider:
direction: top-bottom
background: gradient
use_state_color: false
use_percentage_bg_opacity: false
toggle_on_click: false
show_track: false
force_square: true
invert: true
show_attribute: false
show_name: true
show_state: true
compact: false
icon:
show: true
use_state_color: false
tap_action:
action: more-info
icon: mdi:roller-shade
action_button:
mode: toggle
icon: mdi:power
show: false
show_spinner: true
tap_action:
action: toggle
name: SALON
show_attribute: true
style: |
ha-card {
height: 400px !important;
background-image: url('/local/test.png')
}
}
:host {
--slider-track-color: transparent;
}
Yes I did 
Sorry this is a quick reply, but here is what I use for a light that isn’t dimmable.
- cards:
- color_type: blank-card
styles:
card:
- width: 0px
type: custom:button-card
- color: black
color_type: card
name: Kitchen
show_icon: true
show_label: true
styles:
card:
- margin: 2px 2px 2x 2x
- background-color: ' '
- text-shadow: 0px 0px 0px black
- filter: opacity(90%)
- height: 50px
- width: 165px
- padding: 6px
name:
- white-space: normal
- color: white
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.sonoff_xxxxxxx
type: custom:button-card
- color_type: card
entity: switch.sonoff_xxxxxxx
name: ' '
state:
- color: black
icon: mdi:spotlight-beam
name: Lights off
operator: default
styles:
card:
- height: 50px
- filter: opacity(30%)
icon:
- filter: opacity(0%)
name:
- filter: opacity(0%)
- color: ' '
type: custom:button-card
- color_type: card
entity: switch.sonoff_xxxxxxxxxx
name: ' '
size: 80%
state:
- color: ' '
icon: mdi:lightbulb-on
styles:
card:
- border-radius: 30px
- border-color: var(--button-card-light-color)
- width: 50px
- height: 50px
- box-shadow: 0px 0px 4px 2px var(--button-card-light-color)
icon:
- color: var(--button-card-light-color)
value: 'on'
- color: ' '
icon: mdi:lightbulb-off
name: ' '
operator: default
styles:
card:
- width: 50px
- height: 50px
- border-radius: 15px
- border-style: solid
- border-width: 0px
- border-color: '#2c2c2e'
- filter: opacity(70%)
icon:
- color: grey
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.null
type: custom:button-card
- color_type: blank-card
styles:
card:
- width: 0px
type: custom:button-card
type: horizontal-stack
This is what I use for a dimmable light:
- cards:
- color_type: blank-card
styles:
card:
- width: 0px
type: custom:button-card
- color: black
color_type: card
name: Lounge Left
show_icon: true
show_label: true
styles:
card:
- margin: 2px 2px 2x 2x
- background-color: ' '
- text-shadow: 0px 0px 0px black
- filter: opacity(90%)
- height: 50px
- width: 165px
- padding: 6px
name:
- white-space: normal
- color: white
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.shellydimmer2_xxxxxxx
type: custom:button-card
- color_type: card
name: ' '
entity: light.shellydimmer2_xxxxxxx
style: |
:host {
--slider-color: rgba(249, 230, 50, 0.20); !important;
--action-icon-color-off: rgba(255, 255, 255, 0.40) !important;
--action-icon-color-on: rgba(255, 255, 255, 0.99) !important;
--state-color-off: rgba(255, 255, 255, 0.00) !important;
--state-color-on: rgba(255, 255, 255, 0.00) !important;
--label-color-off: rgba(255, 255, 255, 0.80) !important;
--label-color-on: rgba(255, 255, 255, 0.99) !important;
--action-spinner-color: rgba(225, 195, 0, 0.99) !important;
}
ha-card {
background-color: rgba(249, 230, 50, 0.20);
opacity: 0.85;
}
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: true
show_track: false
force_square: false
toggle_on_click: false
show_name: true
show_state: true
compact: true
icon:
icon: mdi:lightbulb-on-40
show: false
use_state_color: true
tap_action:
action: ' '
action_button:
mode: custom
icon: mdi:power
show: false
show_spinner: true
use_state_color: true
tap_action:
action: toggle
hold_action:
action: toggle
type: custom:slider-button-card
- color_type: card
entity: light.shellydimmer2_xxxxxxx
name: ' '
size: 80%
state:
- color: ' '
icon: mdi:lightbulb-on
styles:
card:
- border-radius: 30px
- border-color: var(--button-card-light-color)
- width: 50px
- height: 50px
- box-shadow: 0px 0px 4px 2px var(--button-card-light-color)
icon:
- color: var(--button-card-light-color)
value: 'on'
- color: ' '
icon: mdi:lightbulb-off
name: ' '
operator: default
styles:
card:
- width: 50px
- height: 50px
- border-radius: 15px
- border-style: solid
- border-width: 0px
- border-color: '#2c2c2e'
- filter: opacity(70%)
icon:
- color: grey
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.null
type: custom:button-card
- color_type: blank-card
styles:
card:
- width: 0px
type: custom:button-card
type: horizontal-stack
This is what it looks like:
What HACS addons are you using?
Thanks for your reply,
Opacity was a good lead but unfortunately your solution is driven by the “ha-card” opacity.
Essentially it make the whole card transparent and “host” opacity values just make each element more or less transparent vs the full card opacity. In other words, If you keep ha-card opacity at 1, the dashboard background won’t show even if you play with “host” opacity values.
I could definitely be wrong so feel free to comment.
Even then, I’ve tried every combination possible but still could not set the slider-track (the “inactive” part of the slider) to a transparent state (or any color in fact).
name: TEST
type: custom:slider-button-card
entity: cover.zemismart_zm25tq_1
style: |
:host {
--slider-track-stripe-color: rgba(249, 0, 50, 0.8);
--slider-track-color: rgba(249, 0, 50, 0.8);
--slider-tracker-color: rgba(249,0, 50, 0.8);
--slider-track: rgba(249, 0, 50, 0.8);
--slider-bg-default-color: rgba(249,0,0, 0.8);
--slider-bg: rgba(249, 230, 50, 0.8);
--slider-color: rgba(249, 230, 50, 0.8);
}
ha-card {
background-color: rgba(249, 0, 50, 0.0);
background: url('/local/test.png') !important;
opacity: 0.5;
height: 50px;
width: 50px;
}
slider:
direction: top-bottom
background: gradient
use_state_color: true
use_percentage_bg_opacity: true
show_track: true
force_square: true
toggle_on_click: false
show_name: true
show_state: true
compact: false
icon:
icon: mdi:window-shutter
show: true
use_state_color: true
tap_action:
action: ' '
action_button:
mode: custom
icon: mdi:power
show: false
show_spinner: true
use_state_color: true
tap_action:
action: toggle
hold_action:
action: toggle
Good news is I managed to do exactly what I wanted with my-slider-v2 (Thanks to @AnthonMS !)
examples below with roller blind and horizontal blinds style:
Thanks, for the “missing piece” 
Would you mind sharing the code for your examples you created with my-slider-v2. I’ve been trying to do exactly what you have but with Deejayfool/hass-shutter-card.
Using card_mod I can get close to what I want but just have some issues with sizing and alignment. I really like what you have. Thanks.
Glad you like it, here is an example; to be adapted to your needs.
- type: custom:my-slider-v2
entity: cover.rollershade1
vertical: true
styles:
card:
- height: 25rem
- width: 110%
- right: null
- left: '-5%'
container:
- width: 102%
- height: 102%
- position: relative
- overflow: hidden
- border-radius: 5px
- background: null
- opacity: 100%
track:
- width: 100%
- height: 100%
- position: relative
- background: transparent
progress:
- height: 100%
- background: url('/local/dashboard/sliders/roller_blind.jpg')
- background-position: top
- background-repeat: no-repeat
- background-size: 95% 97%
- position: absolute
- width: 100%
- left: 0px
thumb:
- height: 100%
- background: black
- position: absolute
- left: 0px
- width: 0px
card_mod:
style: |
ha-card {
background: url('/local/dashboard/sliders/window_outdoor_view.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
Thank you very much!
I can not seem to figure it out, is it possible to display ‘secondary info’ in the card ? For example a dimmer with it’s actual power consumption, which is a separate entity.
Love this. I am trying to use it for media players currently, and while it seems to work perfectly, I get an error popping up whenever I make a volume change.
Failed to call service media_player/volume_mute. unknown error
This is the code (although generated through the UI)
type: vertical-stack
cards:
- type: custom:slider-button-card
entity: media_player.office
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: false
show_track: true
toggle_on_click: false
force_square: false
show_attribute: true
attribute: media_title
show_name: true
show_state: true
compact: false
icon:
show: true
use_state_color: true
tap_action:
action: more-info
icon: ''
action_button:
mode: toggle
icon: mdi:power
show: true
show_spinner: true
tap_action:
action: toggle
attribute: volume_level
show_attribute: false
Any thoughts?
Hi,
I’m trying to dial in a climate slider. I’d like to be able to reflect the set vs current temperature. Currently I can do that, but it’s not formatted very nice.
Ideally it would show ‘set F | current F’ or something similar. Whereas right now it’s showing ‘set F | Heat* - current’
*I’m guessing ‘heat’ is showing the HVAC state which is not important as this is heat only.
If I add show_state: false it will not show 'set F | Heat* - '. Is there any way to string together attributes under the 'attribute: ’ line? ‘temperature’ is another attribute, but I don’t know how/if you can string together the attributes and add anything inbetween, like a template kind of thing.
Thank you so much!
Is there a way to “flip” the colour to the other side? I am using an input_number slider to set the value of a cover (blinds) and the blinds use that system where 0% = closed and 100% = open. Which means in order to make the slider appear like the blinds do, I need to flip the direction (either bottom to top OR right to left) and then I need to flip the side of the slider that has the shading. I hope that makes sense. Here’s a screenshot to further explain what I mean. If the input_slider is set to 40% (as shown) then then the blinds will be 40% open. Numerically this is correct. But I want the shaded part to appear as the blinds do. I’d like the area that is “black” to be shaded blue, and the area that is shaded “blue” to be black - to give the appearance of the blinds position.
Never mind, I should have read the docs first. For those trying to do the same thing, switch to yaml (instead of the UI editor) and add the following line to the `slider’ options:
invert: true
I have an icon visible in compact mode with a horizontal slider. The tap action on the button is set to none. When trying to swipe in the lower percentages where the icon is, the icon still acts like a touchable button, even though it doesn’t have any action.
Is it possible to make it totally invisible to touches so that I can swipe through it?
Hello everyone,
Is it also possible for this card that the icon changes based on the condition of a lamp?
If yes, how do I do this?
Thank you for your response.
