When i set my cover let say 20% then i see cover position. It is where i should be but when i go somewhere else than overview page or refresh overview then cover position is again fully open and its does not show correct position until i change position again.
Is there solution that cover knows every time her correct position?
Try this 
It fixed the full gradient problem for me!
- type: custom:slider-button-card
entity: light.kitchen_lights
compact: true
slider:
direction: left-right
background: gradient
use_percentage_bg_opacity: true
use_state_color: false
action_button:
mode: toggle
show_spinner: false
show: false
icon:
show: true
style: |
:host {
--slider-color: rgba(255, 136, 55, 0.68) !important;
}
.slider-bg {
width: var(--slider-value) !important;
}
1 Like
Hi everyone.
Iād like to change the icon color too but I canāt ā¦
type: horizontal-stack
cards:
- type: custom:slider-button-card
entity: switch.relay
slider:
direction: left-right
background: gradient
use_state_color: false
use_percentage_bg_opacity: false
show_track: false
toggle_on_click: true
force_square: false
show_name: true
show_state: false
compact: false
icon:
icon: mdi:coach-lamp
show: true
tap_action:
action: more-info
action_button:
mode: custom
icon: mdi:power
show: true
show_spinner: true
tap_action:
action: toggle
style: |
:host {
--icon-color:
var("--paper-item-icon-color": green) !important;
}
name: Lanterna
Some advice
Grazie
Resolved
style: |
:host {
--slider-color: rgba(255, 136, 55, 0.68) !important;
--icon-color: rgba(255, 136, 55, 0.68) !important;
--action-icon-color-off: rgba(255, 136, 55, 0.68) !important;
--label-color-off: rgba(255, 136, 55, 0.68) !important;
--label-color-on: rgba(65, 131,215, 0.68) !important;
}
}
.slider-bg {
width: var(--slider-value) !important;
}
Grazie
Yes there is! Nothing in GUI yet, but you can define it yaml like so:
slider:
min: 15
max: 75
The maintainer of this project hasnāt been active in some months. Iāve been pushing pull requests anyway, and a GUI config for slider min and max is on my todo list. Having been digging around in the code of this card quite a bit lately, it should be a really quick addition. Iām also taking a bit of a break from this project (trying not to burn myself out, and unrelated health issues), but Iāll bump this to the top of my list
1 Like
Yes! I submitted a pull request to allow the user to define any attribute to also show next to the state.
You can use this for thermostat current_temperature or any other entity attribute.
Iāve added sensor support here:
Hi, how to change background color, then state is OFF?
Iād also like to know this, as Iāve been pulling my hair out trying to figure this out. It would be nice to set it as āclearā . I normally achieve this like:
styles:
card:
- background-color: ā ā
Iāve attached 1 example of my code with a screenshot of the visual representation of 2 different attempts. The top one has the gradient permanently behind the slider, and the bottom one Iāve managed to make transparent but then has the background primary colour behind it (Cant seem to get a transparent background). The code below is of the top example in the pic. All I want is a transparent background.
color_type: card
entity: light.shellydimmer2_3c6105e33338
style: |
:host {
--slider-color: rgba(255, 255, 0, 0.99);
--action-icon-color-off: rgba(74, 74, 74, 0.68) !important;
--action-icon-color-on: var(--button-card-light-color) !important;
--label-color-off: rgba(255, 255, 255, 0.7) !important;
--label-color-on: rgba(255, 255, 255, 0.99) !important;
--action-spinner-color: var(--state-color) !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);
}
.ha-card {
background-color: transparent;
box-shadow: none;
}
slider:
direction: left-right
background: gradient
use_state_color: false
use_percentage_bg_opacity: true
show_name: true
show_state: true
compact: true
styles:
name:
- font-size: 3em
icon:
show: false
use_state_color: true
tap_action:
action: more-info ''
action_button:
mode: custom
icon: mdi:lightbulb-on
show: true
show_spinner: true
tap_action:
action: toggle
name: Lounge Left -
type: custom:slider-button-card
These are the slider and slider-track (the āinactiveā part of the slider) CSS variables and their default settings:
:host {
--slider-bg-default-color: var(--primary-color, rgb(95, 124, 171));
--slider-bg: var(--slider-color);
--slider-bg-filter: brightness(100%);
--slider-bg-direction: to right;
--slider-track-color: #2b374e;
--slider-tracker-color: transparent;
--slider-value: 0%;
--slider-transition-duration: 0.2s;
...
}
combined with show_track: false in your cardās yaml config, this might get you where you need to go
1 Like
Is there any way to have the button as both a slider and a toggle?
Ive tried multiple different configs and cant get it to work?
Iād like to have a light switch button, as both a slider, and be able to click the button to turn off and on
my button looks like:
- type: 'custom:slider-button-card'
entity: light.lounge_light
slider:
direction: left-right
background: gradient
use_state_color: true
icon:
icon: mdi:ceiling-light
tap_action:
action: more-info
use_state_color: true
action_button:
show: false
I realise i can do this using the icon, or action button, but i dont want the action button, it looks cleaner without it, and the icon i use for more-info
It took a code change but I did implement this almost entirely. It works for a finger tap on a touch screen but not a mouse click. As far as the card seems concerned both interaction methods send the same signals, but I canāt figure out the difference yet.
Iāve got it implemented (along with other changes) on my fork of the card, but Iām also working with someone else to update the card in HACS since the original programmer has disappeared. Hopefully that will be up soon. Iām really excited to get this particular change completed and available. Itās made a world of difference using the card on my phone.
Did you ever get this figured out? I have the same issue, the companion app as well as all Firefox, Safari, Chrome all have the problem - makes sense I guess as they all use the same rendering engine. Works fine everywhere else: browsers (including Safari) on my desktop, Fire tablet, etc.
EDIT: it looks like an āupā event is sometimes being missed. While you drag the slider the state text (e.g. percentage for lights) is bigger as you drag the slider and then returns to normal when you release the slider. When it goes wrong the slider stays in ādraggingā mode. If you then tap and release the slider if goes back to normal on the release (not on the tap).
EDIT 2: the problem is that touch events are not being tracked outside the slider track or when your finger is over the icon or the action button. E.g. move your finger to move the slider, move your finger out of the track and the slider stops moving, move your finger back on the track and the slider ācatches upā. Move your finger out of the track and lift it up and the slider stays in ādraggingā mode.
So I took care of your second edit awhile ago actually! I did manage to get the tap thing working too. Working on merging it into the main project. Real-life has been a problem lately though
Sorry to hear that, I hope it gets better soon.
Great that you fixed it! Is there a branch or a diff I can test? Removing the *PointerCapture calls fixes it for iOS but breaks desktop Safari and Firefox so not sure where to go from here.
EDIT: so looks like itās a known iOS bug: Bug 220196: [iOS] #setPointerCapture does not dispatch pointer events outside element boundary which has been fixed in iOS 15.5. I just upgraded my phone and it looks like that fixed it.
iOS 15.5 fixed some issues with pointer focus. You might want to check if this is solved now.
I merged it into my personal main a long time ago https://github.com/lizsugar/slider-button-card
I donāt use ios. The issue was present on windows and Android too 
1 Like
Your change didnāt fix it for iOS because of the bug I mentioned. Updating to 15.5 has fixed it there too so looks like it works everywhere now.
Hello, before I start. Just wanted to say thanks for the great slider button card. Been using for some time and it is one of my favorite addons.
But I just recently seeing this in my HACs page:
Removed repository āmattieha/slider-button-cardā
Abandoned, community fork maintained at custom-cards/slider-button-card
It looks like the project is still actively being worked onā¦ activity with the last 2 weeks.
Is this some sort of mis-communication between the HACs interface and this project or is this project really coming to an end?
3 Likes