Lovelace: Slider Button Card

Great card!
But i miss the feature like in custom:button card, called “custom_fields”
Is it possible to add something like that in the future? :slight_smile:

I really want to love this card, but… my Lovelace backgrounds are black. It appears if the color of a light is anything except white it works. But if the light color is white, the slider is all black (like my background) and is never visible when adjusting the brightness.

I’ve tried multiple settings but nothing will show the slider on a black background when white is the light color.

Any thoughts?

How can I change the language of the plugin? I have a russian interface, but plugin shows its nformation in english :frowning:
image

Has anyone had issues using the slider on iOS devices? On Android devices I can turn on/off devices with a flick of a finger but with iOS I have to swipe THEN tap in order for it to register and even then it just sets the brightness to 2% or 98% but never on or off.

1 Like

Hi!

This plugin is great!

However, I want to use the slider as a progress bar for a sensor (progress for the dishwasher 0-100 %). It does not supports sensor, was thinking of making a template light or cover, but could not get it to work.

Can you add support for sensor?
Or do you have any better solution for this?

This card is meant to control devices. For displaying information (like sensors) I think you’re better off using this card: Lovelace: Bar Card

Yeah, for shore that would be the best choise. I believe it’s to much work to get it to look like this component. Would be nice to have it matching the rest of the light controllers and such :slightly_smiling_face:

Hi, I have a graphic “problem” with the card.
When I touch a toggle, the card is circled with a blue border.
Can this border be removed?


I´m trying to do a custom color for the slider that controlls a blind. Is it possible and do someone have the code for this?

2 Likes

Ok since I´m not very good on coding I´ve done a lot of research to try to get this to work but I can´t solve it…
In the documentation there is examples of styles that can be used. I have, of course, got the examples that are there to work. But there is no example of how to change the color of the slider.
If I change the primary color in the theme that changes the color of the slider but I only want to change color in some of my slider button cards.
I have tried to use --primary-color in the card but that dosent work.

Is it realy possible that there arent any way to change the color of the slider?
One workaround could be to set a diffrent theme for the specific card but I can´t see that there are a way to do that either…

Has anyone figured out if it is possible to control the duet blinds from HunterDouglas? The ones you can open from top and bottom? Is it possible?

Try this, it works for me, however I am stuck with another problem, that the card always shows the full gradient and not only the percentage the light is on.

- type: custom:slider-button-card
  entity: light.office_top
  style: |
	:host {
		--slider-color: rgba(255, 255, 255, 0.6) !important;
	}
  slider:
	direction: bottom-top
	background: gradient
2 Likes

Is there a way to reset the size of the button with the width of the screen/window?
I currently have a 2 column grid for the dashboard, with 4 columns in each.
I am trying to go to 2 column, with 4 columns each.
This is what it currently looks like, it looks great.

When I change to 3 columns, I get this:

I have the standard buttons working (lights, etc)
The slider-button-card with the cover config is messed up.
Note: yes, I have the same issue with my temperature sensor node and I am working on that, it is my own card. But trying to see if there is a way to configure the slider-button-card to properly resize with a window.

Is it possible to change icon to a bigger one and add buttons for up/down and stop when it comes Roller Shutter?

Thank you for the awesome card! I have replaced all my custom button cards with this.

Is it possible/would it be possible to override the color of the mdi:icon when off/on? I don’t see those options exposed.

Is it possible/would it be possible to override the spin of the mdi:icon when off/on? I don’t see those options exposed.

1 Like

Hello, I want to use this for my thermostats and digital TRVs as I have always wanted a sliders on my wall mounted tablets, is there any way I can add the current temperature into the slider box please? Happy to modify the code myself if given a few pointers :slight_smile:

Cheers
Mark

Hi @mattieha, I really love this card! :star_struck:

I was using the custim mini-media-player card but on touchscreens you really had to be exactly on the dot to change the value.
With your card, it is really perfect for touchscreens, so thank you for it!

I have one small idea/request: would it be possible to move the value/status (show_state) to the right instead behind the name?
So from this:
Slider1

to this: (no code edit but just picture manipulation)
Slider2

In my opinion: it is more practical since when you want to finetune a low value - being light or volume - your finger is in the way.
It also looks better, I think.

1 Like

One Question,

I have noticed the icon picker has disappeared and the icon shown has followed what icon you have as your entity. Is there a way to bring the icon picker back as for some buttons are set to groups and I would like to assign an overarching icon for the group.

Thanks love the card.

Drezin

1 Like

Hello,

Is it possible to wrap the ‘Name’ text to a second line? I have a bunch of these in a grid which causes the names of some of them to be things like- “Living Room Li…”

Also, is it possible to have the icon color change based on whether or not the light is on? Mine will either be blue when on or greyed out when off.

Thanks!

To do multiple lines of text do something like the following:

# garage-cover
  garage-cover:
    type: 'custom:button-card'
    template: standard-button
    show_label: true
    tap_action:
      action: toggle
    styles:
      name:
        - font-size: 0.45em
      label:
        - color: white
        - font-size: 0.45em
    state:
      - value: open
        id: value_on
        label: open
        styles:
          label:
            - color: blue
      - value: closed
        id: value_off
        label: closed
        styles:
          label:
            - color: white
      - value: opening
        label: opening
        icon: 'mdi:arrow-up-bold-box-outline'
        styles:
          card:
            - background-color: LightCoral
          name:
            - color: yellow
          label:
            - color: yellow
          icon:
            - color: yellow
      - value: closing
        label: closing
        icon: 'mdi:arrow-down-bold-box-outline'
        styles:
          card:
            - background-color: LightSkyBlue
          name:
            - color: yellow
          label:
            - color: yellow
          icon:
            - color: yellow

This will show both a name and a label and you can place the two elements one over the other to get the two-line text on your button. Also notice the icon: - color: yellow lines. That will change the icon color according to the state.