Lovelace: Slider Button Card

Strange issue…
When the light is off, the state is hidden (eg no ‘Off’ in the button)
But when the light is on, it shows correctly the dim percentage.

Does anyone know how I can resolve this, so it shows the ‘Off’ state?
I’m running on HA 2023.7.3

This bug is present since a while now, I believe this bug was introduced with an update in 2023.4.x update. I still am on that version (since many things on frontend broke after 2023.5 and I need time to resolve those changes before updating). But I can confirm this is an old bug, that I think happened because of yet again new frontend changes with 2023.4.x somewhere.

1 Like

Thanks for your answer!
Hopefully someone can fix the slider button code, so we can use it in the current HA versions.
Sadly I don’t have enough coding skills to fix it myself.

First of all: I love this!

But how do i customise it so the background has a slight of opacity?

I want background when state is “on” to be white with opacity :: rgba(255,255,255,0.3)
and when state is “off” to be black with opacity :: rgba(0,0,0,0.3)

Hope someone can help me :wink:

I just fixed it with the latest release (v1.10.11)!

Looking for some expertise and/or suggestions. It seems my slider button cards are not reflecting the correct color in the on state compared to other cards i.e. entity card. I have a white LED strip which shows the correct on state color of white, while the slider button shows the default color. Changing use_state_color makes no difference. (see below as examples: Slider Card vs. Entity Card)

Office2-1

Office2-2

Trying to get this working but can’t make the slider-track transparent.
I see the background image behind but the slider-track remains white instead of transparent.
also tried rgba(0,0,0,0), no success.

@HellfireZA did you manage to make this work ?
@lizsugar anything else I could try vs below or maybe some typo (newbie here).

Thx

square: true
type: grid
cards:
  - type: custom:slider-button-card
    entity: cover.zemismart_zm25tq_1
    slider:
      direction: top-bottom
      background: gradient
      use_state_color: false
      use_percentage_bg_opacity: false
      toggle_on_click: false
      show_track: false
      force_square: true
      invert: true
      show_attribute: false
    show_name: true
    show_state: true
    compact: false
    icon:
      show: true
      use_state_color: false
      tap_action:
        action: more-info
      icon: mdi:roller-shade
    action_button:
      mode: toggle
      icon: mdi:power
      show: false
      show_spinner: true
      tap_action:
        action: toggle
    name: SALON
    show_attribute: true
    style: |
      ha-card {
      height: 400px !important;
      background-image: url('/local/test.png')
         }
      }
      :host {
        --slider-track-color: transparent; 
            }

image

Yes I did :slight_smile:
Sorry this is a quick reply, but here is what I use for a light that isn’t dimmable.

  - cards:
      - color_type: blank-card
        styles:
          card:
            - width: 0px
        type: custom:button-card
      - color: black
        color_type: card
        name: Kitchen
        show_icon: true
        show_label: true
        styles:
          card:
            - margin: 2px 2px 2x 2x
            - background-color: ' '
            - text-shadow: 0px 0px 0px black
            - filter: opacity(90%)
            - height: 50px
            - width: 165px
            - padding: 6px
          name:
            - white-space: normal
            - color: white
        tap_action:
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: switch.sonoff_xxxxxxx
        type: custom:button-card
      - color_type: card
        entity: switch.sonoff_xxxxxxx
        name: ' '
        state:
          - color: black
            icon: mdi:spotlight-beam
            name: Lights off
            operator: default
            styles:
              card:
                - height: 50px
                - filter: opacity(30%)
              icon:
                - filter: opacity(0%)
              name:
                - filter: opacity(0%)
                - color: ' '
        type: custom:button-card
      - color_type: card
        entity: switch.sonoff_xxxxxxxxxx
        name: ' '
        size: 80%
        state:
          - color: ' '
            icon: mdi:lightbulb-on
            styles:
              card:
                - border-radius: 30px
                - border-color: var(--button-card-light-color)
                - width: 50px
                - height: 50px
                - box-shadow: 0px 0px 4px 2px var(--button-card-light-color)
              icon:
                - color: var(--button-card-light-color)
            value: 'on'
          - color: ' '
            icon: mdi:lightbulb-off
            name: ' '
            operator: default
            styles:
              card:
                - width: 50px
                - height: 50px
                - border-radius: 15px
                - border-style: solid
                - border-width: 0px
                - border-color: '#2c2c2e'
                - filter: opacity(70%)
              icon:
                - color: grey
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.null
        type: custom:button-card
      - color_type: blank-card
        styles:
          card:
            - width: 0px
        type: custom:button-card
    type: horizontal-stack

This is what I use for a dimmable light:

  - cards:
      - color_type: blank-card
        styles:
          card:
            - width: 0px
        type: custom:button-card
      - color: black
        color_type: card
        name: Lounge Left
        show_icon: true
        show_label: true
        styles:
          card:
            - margin: 2px 2px 2x 2x
            - background-color: ' '
            - text-shadow: 0px 0px 0px black
            - filter: opacity(90%)
            - height: 50px
            - width: 165px
            - padding: 6px
          name:
            - white-space: normal
            - color: white
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.shellydimmer2_xxxxxxx
        type: custom:button-card
      - color_type: card
        name: ' '
        entity: light.shellydimmer2_xxxxxxx
        style: |
          :host {
              --slider-color: rgba(249, 230, 50, 0.20); !important;
              --action-icon-color-off: rgba(255, 255, 255, 0.40) !important;
              --action-icon-color-on: rgba(255, 255, 255, 0.99) !important;
              --state-color-off: rgba(255, 255, 255, 0.00) !important;
              --state-color-on: rgba(255, 255, 255, 0.00) !important;
              --label-color-off: rgba(255, 255, 255, 0.80) !important;
              --label-color-on: rgba(255, 255, 255, 0.99) !important;
              --action-spinner-color: rgba(225, 195, 0, 0.99) !important;
            }
           ha-card {
              background-color: rgba(249, 230, 50, 0.20);
              opacity: 0.85;
           }
        slider:
          direction: left-right
          background: gradient
          use_state_color: true
          use_percentage_bg_opacity: true
          show_track: false
          force_square: false
          toggle_on_click: false
        show_name: true
        show_state: true
        compact: true
        icon:
          icon: mdi:lightbulb-on-40
          show: false
          use_state_color: true
          tap_action:
            action: ' '
        action_button:
          mode: custom
          icon: mdi:power
          show: false
          show_spinner: true
          use_state_color: true
          tap_action:
            action: toggle
          hold_action:
            action: toggle
        type: custom:slider-button-card
      - color_type: card
        entity: light.shellydimmer2_xxxxxxx
        name: ' '
        size: 80%
        state:
          - color: ' '
            icon: mdi:lightbulb-on
            styles:
              card:
                - border-radius: 30px
                - border-color: var(--button-card-light-color)
                - width: 50px
                - height: 50px
                - box-shadow: 0px 0px 4px 2px var(--button-card-light-color)
              icon:
                - color: var(--button-card-light-color)
            value: 'on'
          - color: ' '
            icon: mdi:lightbulb-off
            name: ' '
            operator: default
            styles:
              card:
                - width: 50px
                - height: 50px
                - border-radius: 15px
                - border-style: solid
                - border-width: 0px
                - border-color: '#2c2c2e'
                - filter: opacity(70%)
              icon:
                - color: grey
        tap_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.null
        type: custom:button-card
      - color_type: blank-card
        styles:
          card:
            - width: 0px
        type: custom:button-card
    type: horizontal-stack

This is what it looks like:
Capture
Capture

What HACS addons are you using?

Thanks for your reply,

Opacity was a good lead but unfortunately your solution is driven by the “ha-card” opacity.
Essentially it make the whole card transparent and “host” opacity values just make each element more or less transparent vs the full card opacity. In other words, If you keep ha-card opacity at 1, the dashboard background won’t show even if you play with “host” opacity values.
I could definitely be wrong so feel free to comment.

Even then, I’ve tried every combination possible but still could not set the slider-track (the “inactive” part of the slider) to a transparent state (or any color in fact).

name: TEST
type: custom:slider-button-card
entity: cover.zemismart_zm25tq_1
style: |
  :host {
      --slider-track-stripe-color: rgba(249, 0, 50, 0.8);
      --slider-track-color: rgba(249, 0, 50, 0.8);
      --slider-tracker-color: rgba(249,0, 50, 0.8);      
      --slider-track: rgba(249, 0, 50, 0.8);
      --slider-bg-default-color: rgba(249,0,0, 0.8);
      --slider-bg: rgba(249, 230, 50, 0.8);     
      --slider-color: rgba(249, 230, 50, 0.8); 
    }
   ha-card {
     background-color: rgba(249, 0, 50, 0.0);
     background: url('/local/test.png') !important;
     opacity: 0.5;
     height: 50px;
     width: 50px;
    }
slider:
  direction: top-bottom
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: true
  show_track: true
  force_square: true
  toggle_on_click: false
show_name: true
show_state: true
compact: false
icon:
  icon: mdi:window-shutter
  show: true
  use_state_color: true
  tap_action:
    action: ' '
action_button:
  mode: custom
  icon: mdi:power
  show: false
  show_spinner: true
  use_state_color: true
  tap_action:
    action: toggle
  hold_action:
    action: toggle

Good news is I managed to do exactly what I wanted with my-slider-v2 (Thanks to @AnthonMS !)

examples below with roller blind and horizontal blinds style:

ezgif.com-video-to-gif

2 Likes

Thanks, for the “missing piece” :slight_smile:

slider2

Would you mind sharing the code for your examples you created with my-slider-v2. I’ve been trying to do exactly what you have but with Deejayfool/hass-shutter-card.
Using card_mod I can get close to what I want but just have some issues with sizing and alignment. I really like what you have. Thanks.
Screenshot 2023-12-11 083354

Glad you like it, here is an example; to be adapted to your needs.

            - type: custom:my-slider-v2
                entity: cover.rollershade1
                vertical: true
                styles:
                  card:
                    - height: 25rem
                    - width: 110%
                    - right: null
                    - left: '-5%'
                  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%; 
                    }

Thank you very much!

1 Like

I can not seem to figure it out, is it possible to display ‘secondary info’ in the card ? For example a dimmer with it’s actual power consumption, which is a separate entity.

Love this. I am trying to use it for media players currently, and while it seems to work perfectly, I get an error popping up whenever I make a volume change.

Failed to call service media_player/volume_mute. unknown error

This is the code (although generated through the UI)

type: vertical-stack
cards:
  - type: custom:slider-button-card
    entity: media_player.office
    slider:
      direction: left-right
      background: gradient
      use_state_color: true
      use_percentage_bg_opacity: false
      show_track: true
      toggle_on_click: false
      force_square: false
      show_attribute: true
      attribute: media_title
    show_name: true
    show_state: true
    compact: false
    icon:
      show: true
      use_state_color: true
      tap_action:
        action: more-info
      icon: ''
    action_button:
      mode: toggle
      icon: mdi:power
      show: true
      show_spinner: true
      tap_action:
        action: toggle
    attribute: volume_level
    show_attribute: false

Any thoughts?

Hi,

I’m trying to dial in a climate slider. I’d like to be able to reflect the set vs current temperature. Currently I can do that, but it’s not formatted very nice.

Ideally it would show ‘set F | current F’ or something similar. Whereas right now it’s showing ‘set F | Heat* - current’

*I’m guessing ‘heat’ is showing the HVAC state which is not important as this is heat only.

If I add show_state: false it will not show 'set F | Heat* - '. Is there any way to string together attributes under the 'attribute: ’ line? ‘temperature’ is another attribute, but I don’t know how/if you can string together the attributes and add anything inbetween, like a template kind of thing.

Thank you so much!

Is there a way to “flip” the colour to the other side? I am using an input_number slider to set the value of a cover (blinds) and the blinds use that system where 0% = closed and 100% = open. Which means in order to make the slider appear like the blinds do, I need to flip the direction (either bottom to top OR right to left) and then I need to flip the side of the slider that has the shading. I hope that makes sense. Here’s a screenshot to further explain what I mean. If the input_slider is set to 40% (as shown) then then the blinds will be 40% open. Numerically this is correct. But I want the shaded part to appear as the blinds do. I’d like the area that is “black” to be shaded blue, and the area that is shaded “blue” to be black - to give the appearance of the blinds position.

image

Never mind, I should have read the docs first. For those trying to do the same thing, switch to yaml (instead of the UI editor) and add the following line to the `slider’ options:

invert: true

I have an icon visible in compact mode with a horizontal slider. The tap action on the button is set to none. When trying to swipe in the lower percentages where the icon is, the icon still acts like a touchable button, even though it doesn’t have any action.

Is it possible to make it totally invisible to touches so that I can swipe through it?

Hello everyone,

Is it also possible for this card that the icon changes based on the condition of a lamp?
If yes, how do I do this?
Thank you for your response.