Lovelace: Slider Button Card

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.

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?

1 Like

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.

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.

Hey, folks.
My meross garage door opener reports all the right states: open-opening-closing-closed. The icon changes state, but the overall stripes are always shown. Any suggestions, please?

image
image
image
image

      - type: custom:slider-button-card
        entity: cover.garage_door
        slider:
          direction: bottom-top
          background: striped
          toggle_on_click: true
          use_state_color: true
          show_track: false
          lock:
            enabled: false
            duration: 5
        icon:
          show: true
          tap_action:
            action: more-info
          icon: ''
          use_state_color: true
        action_button:
          tap_action:
            action: toggle
          mode: custom
          icon: mdi:swap-vertical
          show: false
          show_spinner: false
        name: Garage
        attribute: position

Cool project, I like the design!

Two questions:

Is there any way (or is it planned)

  • to define the min/max value. E.g. for my Sonos player I want to prevent that a quick thumb could set the volume to 100. Currently I use mini-media-player, where it is possible to limit the max to e.g. 40.
  • to define the two gradient colors. I would e.g. like to use that for the water temperature and would do the gradient for that from blue to red (cold to hot).
2 Likes