Hallo, thank you for this beautiful card,
is there a chance please to have more buttons for covers/curtains (inside or somewhere on the side) of the slider button?
(more like the original cover entitiy, what shows “up”, “stop” and “down” buttons, but with the sliding option for the position, what is really great).
The problem is, that during the movement I cant stop the cover, since the “toggle” option continues to go in the running direction (e.g. down) until the final position (e.g. bottom) is reached.
it would be great then! 
thank you
Willy
you proably dont have the position reported by the cover?
Where can i change it?
There are many cover types on the market… usually the cheaper covers do not have the position sensor, and they are regulated by open/close/stop command only. If you have a cover with a position sensor you can send directly the requested position in % (and regulate via a cover card directly).
Luckily there is a workaround (search for time-based covers) you should create a virtual templated cover via configuration.yaml (for each physical cover create one binded virtual cover with predefined time needed for it’s full opening/closing), then you can forget your previous entities and regulate your covers only via these new virtual entites… it works quite well, with only few limitations (e.g. after the power loss you must open/close them once to synchronize again the position statuses in %).
I have Ikea cover and i think it has position sensor.
In here i can read / write manually every time cover position and then it stores this value and now it displays this value for ever.
Can you share what code i have to add to read this automatically in cover card?
Hi, I am not sure about your Zigbee, but for sure your entity doesn’t look like correct cover entity…
you should see something like this (pic):
you should see buttons up / stop / down and the slider for the precise position…
if you see something else try reading the cover integration in the original cover topic,
link: Template Cover - Home Assistant
or the time-based covers I have mentioned before… (link for example here: Custom Component: Cover Time Based) but there is more reading available concernig the correct covers integration…
I have up / stop / down buttons.
And in card i can set up desired position and it shows current position %. But when pages refresh or i go somewhere else and come back then cover % is lost again.
Yes, it seems, as I mentioned, that you still may not have the compatible entity with the card. The slider card (I am also using it) works nice with templated cover entities (the ones what have the slider shown already in the info/setting pannel).
I am not sure about your Zigbee device config… seems not to be a templated cover…
(I guess the card can’t modify the position via attributes, that’s all.)
W.
edit: try to search for “How to template cover Zigbee” …
I can show my code - this solved my case (but not sure about yours, since you are saying you have the position sensor, which I didn’t)
# This transofrms a "timebased" cover to "position reporting" cover
cover:
- platform: cover_rf_time_based
devices:
roleta_galerie: # this is the ID of a virtual cover
name: Roleta Galerie # friendly name
travelling_time_up: 21
travelling_time_down: 21
cover_entity_id: cover.rol_galerie # binded entity (in my case tuya switch up/stop/down controlling the cover)
send_stop_at_ends: False
always_confident: True
device_class: shutter
availability_template: "{{ not (is_state('cover.rol_galerie', 'unavailable' )) }}"
roleta_chodba: # this is the ID of a secoind virtual cover
name: Roleta Chodba # friendly name (second)
travelling_time_up: 21
travelling_time_down: 21
cover_entity_id: cover.rol_chodba # another binded entity (in my case tuya switch up/stop/down controlling the cover)
send_stop_at_ends: False
always_confident: True
device_class: shutter
availability_template: "{{ not (is_state('cover.rol_galerie', 'unavailable' )) }}"
... and so on...
I needed to do the opposite: increase the height and the size of the icons so the compact slider would scale with my other buttons.
type: custom:slider-button-card
show: false
compact: true
view_layout:
grid-column: span 2
card_mod:
style: |
:host {
min-height: 8rem;
}
:host .icon {
--mdc-icon-size: 70px;
}
:host .action {
--mdc-icon-size: 70px;
}
:host .compact .text {
position: relative;
left: 50%;
top: 2%;
}
Great work, any plans to accept input_number entities?
1 Like
Yes, icon color control is proving difficult for me.
Cant figure out how I can get the bright yellow slider with #2 and the transparant background as with #1
Would be really grateful if somebody could help me out with this 
- type: custom:slider-button-card
entity: light.living_room
compact: true
name: Woonkamer
<<: &common-style
style: |
ha-card .slider,
ha-card .slider .slider-bg,
ha-card .button.off {
background-color: transparent !important;
}
ha-card .slider-thumb {
transform: translateX(calc(-100% + var(--slider-value)));
background-color: var(--slider-color, transparent);
}
:host {
--slider-bg-default-color: var(--primary-color, rgb(95, 124, 171));
--label-color-on: black !important;
--state-color-on: black !important;
--state-color-off: transparent !important;
--action-icon-color-on: black !important;
--slider-tracker-color: transparent !important;
}
.slider-bg {
width: var(--slider-value) !important;
}
.card-header {
background-color: var(--primary-background-color);
box-shadow: 0px 0px 0px 3px var(--primary-background-color);
}
slider:
direction: left-right
background: solid
action_button:
mode: custom
show: true
tap_action:
action: toggle
same here, did you get this sorted ?
My icons change color according to the on or off state. There’s a toggle in the GUI and you can do it like this:
icon:
show: true
use_state_color: true
That doens’t work in your card?
Just wanted to say I’m amazed a card like this isn’t included in Home Assistant itself. Its so great and highly configurable which is wonderful.
My only wish would be that tapping on the tile itself toggled the device (without needing to have the toggle button visible) and then sliding adjusts. Ideally tap and tap hold actions would be configurable, but so far this is a great addition to my dashboard - thank you!
That works, but what I am trying to do is change the default icon colours for the ‘off’ and ‘on’ states.
Currently they change, but only with the default colours.
I’d like to have the same colour control over the ‘standard’ icon as the Action Icon.
1 Like
I just came across this card and tried to control the tilt position of my covers with it. Unfortunately I am not sure how to use the attribute TILT within the code. Could you please help me with that:
- type: custom:slider-button-card
entity: cover.terrasse_links
slider:
direction: left-right
background: striped
attribute: current_tilt_position
show_track: true
icon:
show: true
tap_action:
action: more-info
action_button:
tap_action:
action: toggle
mode: custom
icon: mdi:swap-vertical
name: Cover
With this code, I am only controlling the position of the cover, but not the tilt position. Thanks for your help!
Hi - I’m displaying some sliders on my iPhone, however when I try to scroll up and down on a slider it slides the slider rather than scrolling. Is there a way to determine when the slider ‘slides’ vs ‘scrolls’ the page, or do you just need to scroll outside of any slider button areas?
Thanks
1 Like
I got a weird behavior from the card, whenever I slide the light intensity below 10% it then says from percentage to saying off, even though the light is tempered to that less than 10%, plus the bulb symbol shows a light that is on???
Any thoughts?
Hi - i love this card, but i have a problem on my android phone’s app.
I can only use touch and slide, if i start the touch event on the slider but then move my finger beside it to change the value.
It is reproducable in the Chrome Dev tools when emulating a touch device.
I’ve mad a video here to showcase the issue:
(it’s the same “dummy”-device for all 4 sliders since i havn’t yet installed my blinds yet)