No, sorry. I tried various things but couldn’t get it working so gave up!
I’ll take a more detailed look at your suggestions, though from a quick glance I thought I’d tried very similar option.
Great, thanks for the nudge to get me to look again.
Your method does work, and indeed I’d already tried it.
But I am also using a decluttering card with the slider button card, and using card-mod for styles. So the style info needed to be under the card-mod: area, not the icon: section (probably sounds like nonsense, but I know what I mean)
Out of interest, do you know what the “! important;” bit does - other than makes it work, which it doesn’t without! Sometimes it seems important (
) and sometimes it doesn’t. But I can’t work out when
1 Like
No problem glad you got it
The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! In the case of Home Assistant, I think that sometimes the selected theme may override what you set under ‘style:’ - so ‘!important’ overrides the theme setting.
1 Like
Ah, that kind of makes sense. Particularly in this instance where we’re over-riding a default style.
I sort of get it, but…a modifier that is effectively the command “No, do it - I really mean it!”
It probably makes a lot more sense if I were to look into it more to be fair. I’m not an expert on CSS, just what I need to get by to make HA work for me enough.
Thanks for the info, though. Much appreciated!
1 Like
My color bulb dimmers have an orange gradient, and I would like my regular dimmers to have the same color. I played around with the styles options but wasn’t able to make it work. Is this doable?
Anybody has been successful implementing the confirmation dialog with the slider area (the entire body of the button)?
I tried “Actions”, but it only works with the icon part or the action_button, but not the slider are.
Would you share the YAML of this card?
I’m trying to play with the style to get the background of the tracker transparent but can’t get my head to the code.
Right now the tracker is filled with the light color but I want it the same background as the main card it’s in it (or transparent).
I’ve tried that code but not working…
style: |
:host {
font-weight: 500;
}
div.icon {
margin: 4px;
font-size: 10px;
}
{
{slider-tracker-color: transparent
}
did this get accepted yet, i dont see this available
Not sure if right thread, I just switched from lovelace UI configuration to pure yaml and since then this card does not load.
Before it worked just by installing from HACS.
Now I am getting the following error
I also tried manually loading it using the url: tag
lovelace:
mode: yaml
resources:
- url: /local/hasl-departure-card.js
type: js
- url: /local/community/slider-button-card/slider-button-card.js
type: js
dashboards:
lovelace-home:
mode: yaml
filename: dashboards/home.yaml
title: second
icon: mdi:tools
show_in_sidebar: false
You should use
- url: /hacsfiles/slider-button-card/slider-button-card.js
type: module
local/community/ has been changed to hacsfiles/ a long time ago, that adds more features: Lovelace Plugins | HACS
I use YAML mode and have this card installed through HACS and use entry this in my resources. This is also what HACS tells you the path is when you want to download the card.
Make sure you manually reload resources. When using YAML mode resources don’t reload automatically. You can do that through dev menu as a service call. Restarting HA also reloads all resources.
1 Like
thank you that worked!
Hi all,
please can you help me? I have this easy slider for light.
type: custom:slider-button-card
entity: switch.kuchyne
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: false
show_track: false
toggle_on_click: false
force_square: false
show_name: true
show_state: true
compact: false
icon:
show: true
use_state_color: true
tap_action:
action: more-info
action_button:
mode: toggle
icon: mdi:power
show: true
show_spinner: true
tap_action:
action: toggle
name: Kuchyn
the problem is, switch does not have color_temp so it is not possible to have slider background in color_temp of the light. How can I set color_temp from another entity (light.kuchyn)
Thanks
I love these cards.
Is there a way to do the following:
Disable the slider and show “more-info” when pressing anywhere on the button.
Currently I can only disable the sliding and then the button acts as a toggle. And I can only have the icon trigger the more-info pop-up.
I’m using it for a template fan, that only supports preset modes as input, but still shows percentage bar for current speed. I can then select the preset mode in the more-info pop-up.
Setting any other percentage than the ones that correspond with the presets will not work with my fan, hence I want to disabled the slider. Toggling it, will turn off the fan completely, which is also not what I want.
Thanks!
FYI to all using this card: you should see this warning in your logs
WARNING: Polymer will be removed from window in Home Assistant 2023.5. More info: Deprecating Polymer | Home Assistant Developer Docs
With a text editor (notepad++, vscodium, …) when you search for polymer in your www folder, you will find the cards that use Polymer.
@mattieha: are you aware of this switch and is there any development on this card since the last release is dated Jul 7, 2021
As far as I can tell, the .js file for this card only references the Polymer license, and doesn’t actually use it in practice. It’s kind of a false positive when doing the text search, and is probably not the source of the warning message you are seeing.
I’ve removed the one other custom card I had that was actually using Polymer, and am still using this card, but no longer see the warnings in the logs.
I maybe wrong of course.
I have the same issue that has been mentioned before; when using a vertical slider button for covers, the whole page is scrolling, so I can’t set the opening-% for covers. Has anybody been able to fix this issue? I have this issue on my mobile Android companion app…
Is there a way for this to support state_display?
Does anyone know of a way to have the toggle activate a different device than the entity controlled by the slider?