🔹 slider-entity-row - Add sliders to entities cards

pgross · May 8, 2023, 7:47pm

Yes! That’d be the perfect card: use the layout of slider-entity-row with a mushroom style slider like this:

onepointbrewing · May 15, 2023, 3:03am

Anyone know how I can change

paper-slider-container-color: “rgba(1,1,1,.2)” using style: | ???

Ive tried this

                          - type: horizontal-stack
                            cards:
                              - type: custom:slider-entity-row
                                entity: input_number.mixer
                                full_row: true
                                hide_state: true
                                min: -5000
                                max: 5000
                                grow: true
                                style: |
                                  slider-entity-row:
                                    $:
                                      ha-slider:
                                        $:
                                          paper-progress:
                                            $: >
                                              #progressContainer {background-color: rgba(100, 0, 0, 1)}

Ive searched the DOM and cant find the reference for it and I dont want to nest it in an entities card.

I can change it in the theme and it works fine without the need for card-mod but I have a few of them and this one in particular is a slider that does hot and cold water mixing.

Faecon · June 8, 2023, 6:06am

Is there a way to have a faster value update of the slider ?

(I have a velux screen. When I push the icon, I can only see the position of the slider when it is finished “sliding”)

Ildar_Gabdullin · June 8, 2023, 6:41pm

Not exactly.
When you finish “sliding” - the defined value is actually assigned to a corresponding entity.
This is how THIS particular slider works.
Other slider-like controls may assign values WHILE you are moving a slider.

Faecon · June 8, 2023, 7:07pm

Ok. Thanks

d_sellers1 · July 15, 2023, 2:07pm

EDIT 20231106: As of 2023.11, this example no longer works. The updated example can be found here.

Recently, I wanted to change the colors of the slider. A regular slider card’s color were pretty easy to modify with card mod, but slider-entity-row as a little bit different. Ultimately, this is what I came up with.

Note: The colors will not update while editing. The changes won’t take affect until you click Save.

YAML code (outdated)

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.hallway
    full_row: true
    toggle: false
    hide_state: true
    step: 10
  - entity: light.hallway
    type: custom:slider-entity-row
    toggle: true
    step: 10
style:
  slider-entity-row:
    $:
      ha-slider:
        $:
          '#sliderKnob.slider-knob': |
            .slider-knob-inner {border: 1px solid white}
            .slider-knob-inner {background-color: white} 
          paper-progress:
            $: >
              #progressContainer {background-color: blue} 
              #primaryProgress{background-color: red}
      ha-entity-toggle:
        $: |
          ha-switch {
            --switch-unchecked-button-color: red;
            --switch-checked-button-color: green;
            --switch-unchecked-track-color: red;
            --switch-checked-track-color: green;
          }

UPDATE 20230815: At some point, something must have changed because the sliderKnob would not show the color I defined. I had to change from '#sliderKnob': | to '#sliderKnob.slider-knob': |

I took elements from the following posts to help me with the process:
@maskazz’s post where he completely redesigned the slider. 🔹 slider-entity-row - Add sliders to entities cards - #203 by maskazz
@Ildar_Gabdullin’s post in card mod thread for coloring the toggle button 🔹 Card-mod - Add css styles to any lovelace card - #1402 by Ildar_Gabdullin
@Kabala 's post which set me in the right direction of what needed to be done 🔹 slider-entity-row - Add sliders to entities cards - #210 by Kabala

jigsaw · August 14, 2023, 1:22pm

How come I am not seeing the position for the entities ? Any configuration that I need to set?

jschafermo · October 29, 2023, 12:12am

Good evening, does this still modify the slider colors? I copied the code, inserted into a manual card to test only changing the entity. I’m unable to change slider colors and haven’t figured out the difference.

Thanks!

d_sellers1:

Recently, I wanted to change the colors of the slider. A regular slider card’s color were pretty easy to modify with card mod, but slider-entity-row as a little bit different. Ultimately, this is what I came up with.

Note: The colors will not update while editing. The changes won’t take affect until you click Save.
type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.hallway
    full_row: true
    toggle: false
    hide_state: true
    step: 10
  - entity: light.hallway
    type: custom:slider-entity-row
    toggle: true
    step: 10
style:
  slider-entity-row:
    $:
      ha-slider:
        $:
          '#sliderKnob.slider-knob': |
            .slider-knob-inner {border: 1px solid white}
            .slider-knob-inner {background-color: white} 
          paper-progress:
            $: >
              #progressContainer {background-color: blue} 
              #primaryProgress{background-color: red}
      ha-entity-toggle:
        $: |
          ha-switch {
            --switch-unchecked-button-color: red;
            --switch-checked-button-color: green;
            --switch-unchecked-track-color: red;
            --switch-checked-track-color: green;
          }
UPDATE 20230815: At some point, something must have changed because the sliderKnob would not show the color I defined. I had to change from '#sliderKnob': | to '#sliderKnob.slider-knob': |

d_sellers1 · October 29, 2023, 1:14am

I just checked in my dashboard (I keep a section of experiments) and it is still functioning. I have not made any changes to it since I made the post. Can you confirm that you have card-mod installed? It doesn’t say it in the yaml (with a card_mod: section) but I’m pretty sure it does rely on it.

jschafermo · October 29, 2023, 2:14am

I do have card-mod installed. My Home Assistant version is 2023.11.0b1 and noticed color changes of the slider and knob while using slider entity row once I upgraded Home Assistant. I had modified the slider bar within my theme.yaml, but that doesn’t seem to work any longer. I seen your code while searching for a solution to my problem. I will continue to work on my problem.

I appreciate your response!

Thanks

jschafermo · November 5, 2023, 1:22am

Do you mind taking a look to see my mistake? I haven’t had any luck getting this to work.

Thanks

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.office_corner_lights
    full_row: false
    toggle: true
    hide_state: true
    step: 10
  - entity: light.office_center_light
    type: custom:slider-entity-row
    toggle: true
    step: 10
style:
  slider-entity-row:
    $:
      ha-slider:
        $:
          '#sliderKnob.slider-knob': |
            .slider-knob-inner {border: 1px solid white}
            .slider-knob-inner {background-color: white} 
          paper-progress:
            $: >
              #progressContainer {background-color: blue} 
              #primaryProgress{background-color: red}
      ha-entity-toggle:
        $: |
          ha-switch {
            --switch-unchecked-button-color: red;
            --switch-checked-button-color: green;
            --switch-unchecked-track-color: red;
            --switch-checked-track-color: green;
          }

d_sellers1 · November 7, 2023, 1:16am

@jschafermo I did not realize it before, but I noticed today, that you were running 2023.11b1; I was still on 2023.10.x when you originally posted and my card worked fine. Now, I’m on 2023.11.1 and my card_mod is broken. I did some work with it today and figured out most of the new syntax and made some improvements.

firefox_7WxQBmjhEj

YAML code

type: entities
entities:
  - entity: light.hallway
    type: custom:slider-entity-row
    toggle: true
    hide_state: false
    step: 10
    card_mod:
      style:
        ha-slider:
          $: |
            div.container {
              --md-sys-color-primary: blue;
              {% if states(config.entity) == "on" %}
                --_active-track-color: orange;
                --_inactive-track-color: hotpink;
                --_handle-color: yellow;
                --_hover-handle-color: lime;
              {% else %}
                --_active-track-color: pink;
                --_inactive-track-color: black;
                --_handle-color: gray;
                --_hover-handle-color: yellow;
              {% endif %}
              --_pressed-handle-color: cyan;
              --_pressed-state-layer-color: yellow;
              --_focus-handle-color: white;
              }
        ha-entity-toggle:
          $: |
            ha-switch {
              {% if states(config.entity) == "on" %}
                --switch-checked-button-color: yellow;
                --switch-checked-track-color: orange;
              {% else %}
                --switch-unchecked-button-color: gray;
                --switch-unchecked-track-color: black;
              {% endif %}
            }

If you want to use just the slider in full mode, the card_mod syntax can be simplified.

YAML code

type: entities
entities:
  - entity: light.hallway
    type: custom:slider-entity-row
    full_row: true
    toggle: false
    hide_state: true
    step: 10
    card_mod:
      style: |
        ha-slider {
          --md-sys-color-primary: blue;
          {% if states(config.entity) == "on" %}
            --_active-track-color: orange;
            --_inactive-track-color: hotpink;
            --_handle-color: yellow;
            --_hover-handle-color: lime;
          {% else %}
            --_active-track-color: pink;
            --_inactive-track-color: black;
            --_handle-color: gray;
            --_hover-handle-color: yellow;
          {% endif %}
          --_pressed-handle-color: cyan;
          --_pressed-state-layer-color: yellow;
          --_focus-handle-color: white;
          }

EDIT 20231109: Updated code to reflect it is supposed to reside within an entities card.

jschafermo · November 8, 2023, 7:36pm

I appreciate your update. For the life of me, I can’t get this to work on my end. I will keep working on it. Thanks again for your effort!

jschafermo · November 9, 2023, 5:38pm

Update: I have it working. I had posted the code into a manual card for testing which didn’t work. Once I notice my mistake and posted the code into an entities card, slider color changes worked!

Thanks again for your assistance!

d_sellers1 · November 10, 2023, 1:18am

Good catch on the missing entities card part. I’ve updated the code above; I just forgot to copy that part from my test-bed

Just for fun, here’s something for ya:

YAML code

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.living_room_lights
    card_mod:
      style:
        ha-slider:
          $: |
            div.container {
              background-image: linear-gradient(to right,red,yellow,green);
              --paper-progress-active-color: none;
            }

Mariusthvdb · November 10, 2023, 10:14am

hi Derek, noticing you use the direct element name variable here, which I also found in the inspector after the move to the new material elements in 2023.11.

would you please care to have a look at 🔹 Card-mod - Add css styles to any lovelace card - #5335 by Mariusthvdb

where I am trying to follow Pauls suggestion to use the new material variables, but am not succeeding…?

seems to me many users would benefit from a direct replacement instruction for those paper slider variables.

jschafermo · November 10, 2023, 10:50pm

I have added this code as well, works great!

Thanks again for taking time as I searched for my error.

Mariusthvdb · November 11, 2023, 1:35pm

missed the ‘all tokens’ on that linked page:

  md-slider-active-track-color: green
  md-slider-inactive-track-color: yellow
  md-slider-focus-handle-color: black
  md-slider-pressed-handle-color: white
  md-slider-handle-color: pink
  md-slider-hover-handle-color: orange
  md-slider-handle-shadow-color: red
  md-slider-label-container-color: grey
  md-slider-label-text-color: purple

all work in theme now.

however, cant find a variable for the container itself. would be a pity if we needed card_mod for that after all

frijnhart · November 15, 2023, 9:40am

Hi, I’m using the slider entity row for quite a while now.
So far it’s been working great, but today I noticed something strange.
Normally when I slide the slider, it will show the values as you slide, so you know where you are. But that value appears to be missing now.
Not sure exactly when this started.

I’m running:

Core 2023.11.1
Supervisor 2023.11.3
Operating System 11.1
Frontend 20231030.1

The card in question:

type: custom:slider-entity-row
entity: input_number.kantoor_target_temperature
name: Set temp kantoor
icon: mdi:temperature-celsius

R_A_L_F · December 3, 2023, 1:34pm

Hello,

How is it possible to indent the numerical value in the slider on the right?

It is span class=“state”.

cards:
  - type: custom:slider-entity-row
    entity: input_number.root_192_168_10_66_volume
    full_row: true
    style: |
      .state {
        margin-right: 10px;
      }

I have tried this but it does not work.
Thanks