Lovelace: Slider Button Card

Yes, Either by using Card-Mod, or Action_button Mode: Custom
Everything explained in the Documentation of the Card :wink:

thank you very much

Did you try to do what you had in mind? I’m interested to use Deejayfool/hass-shutter-card as you done, for example hiding the default buttons. If yes, could you share the code you used for?

Similar to this?

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:shutter-card
    entities:
      - entity: cover.bed_curtains
        shutter_width_px: 100
        always_percentage: false
        name: Bed
    card_mod:
      style: |
        .sc-shutter-top {
          width: 100px;
          }
        .sc-shutter-position {
         background: none !important;}
        .sc-shutter-buttons {
          display: none !important;}
  - type: custom:shutter-card
    entities:
      - entity: cover.tv_curtains
        shutter_width_px: 100
        always_percentage: false
        name: PC
  - type: custom:shutter-card
    entities:
      - entity: cover.pc_curtains
        shutter_width_px: 100
        always_percentage: false
        name: TV
card_mod:
  style: |
    ha-card {
     padding-left: 10px;}
1 Like

Thank you. It works. Now the next step is to create buttons card to open, close, stop and put it at a desired percentage.
I need to to study the button-card tap_action entry how it works.

Is this card still in development? I’m looking for a way to disable the slider function if the entity is off, since im turning lights on all the time by mistake when scrolling down the page in the HA app. Quite anoying

Could you share the code for those amazing and realistics cover sliders? Thank you.

@Juanpermon
Sure. (Thought I would post in the “my-slider” thread but couldn’t find one…)

Sample for a single cover below. Glad you like it.

My final version is for 3 covers + extra buttons to control all covers at once.
In order to optimize screen estate I added a custom:state-switch to show/hide/auto-hide after timeout but code is much longer. I will (eventually) replace the generic outdoor shots with the real thing.

I suggest you open a new thread for further questions/share results so it doesn’t hijack the Slider button card thread. Cheers.

              - type: custom:my-slider-v2
                entity: cover.rollershade3
                vertical: true
                styles:
                  card:
                    - height: 25rem
                    - width: 100%
                    - left: 3%
                  container:
                    - width: 102%
                    - height: 102%
                    - position: relative
                    - overflow: hidden
                    - border-radius: 5px
                    - background: null
                    - opacity: 100%
                  track:
                    - width: 100%
                    - height: 100%
                    - position: relative
                    - background: transparent
                  progress:
                    - height: 100%
                    - background: url('/local/dashboard/sliders/roller_blind.jpg')
                    - background-position: top
                    - background-repeat: no-repeat
                    - background-size: 95% 97%
                    - position: absolute
                    - width: 100%
                    - left: 0px
                  thumb:
                    - height: 100%
                    - background: black
                    - position: absolute
                    - left: 0px
                    - width: 0px
                card_mod:
                  style: |
                    ha-card {
                      background: url('/local/dashboard/sliders/window_outdoor_view.jpg');
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: 100% 100%; 
                    }

Edit: I solved using bubble button card and adding a sub button

I’m using this card to command my speakers.

I’d like the icon to give me a selection of various sources (I think I can do it with input select next), but what I need is having a reference of what source (from a dropdown list) is actually associated to the speaker.

Is there a way to add text from the state of the dropdown list at the end of the name?

Hello, I’m trying to replicate the looks and function of HA entity dialoge sliders for covers:

Is this possible with this card? Meaning can I give it a “handle” that I can “grab” like with the dialoge sliders? And can I give the left slider that cool looking venetian blinds background?

Thanks a lot!

1 Like

Solution: How to create Slider Button Cards inside Auto-Entities that use filters

I searched a ton but did not find anyone post use with Auto-Entities Filter cards. It was not intuitive (not much with dashboard cards is!) and Claude & ChatGPT didnt know either.

Hope this helps others (wish people would post more code and screenshots!)

If you change the columns to a different number it will change the card sizes, etc. you can also use vertical-stack or other card types in place of grid.

type: custom:auto-entities
show_empty: false
card:
  type: grid
  columns: 1
  square: false
card_param: cards
filter:
  include:
    - domain: light
      name: "*RGB*"
      options:
        type: custom:slider-button-card
        compact: true
  exclude: []

1 Like

I’ve had the same problem…the solution I found was to add “card_mod” before the “style”…then it worked for me. (given you have installed card_mod). Here is a working example:

card_mod:
  style: |
    :host {
        --slider-color: rgba(50, 205, 50, 1) !important;
    }

How to make the background transparent?

I have tried multiple card-mod settings and no matter what I try, it never removes the background color. Here's some screenshots showing the results trying the setting...

these do not work
--ha-card-background: none
--ha-card-background: transparent

setting a specific color works...

--ha-card-background: black

Try some of this, thou you could maybe also use a theme variable

Not sure which part you want transparent, i have all my card background set as transparent in Theme
If it's the Slider, it's another story.

Use Inspect :wink: something like ha-card div.button --slider-color: transparent;

slider:
  direction: left-right
  background: transparent