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

kaizersoje · June 30, 2021, 4:19am

I have noticed that when the slider-entity-row is combined with a conditional entity row the state values is not displayed.

type: entities
entities:
  - type: custom:slider-entity-row
    entity: input_number.download_speed_threshold
    full_row: true
    max: 50
    step: 1
    card_mod:
      style: |
        .state {
          font-weight: 600;
          font-size: 120%;
        }
  - type: conditional
    conditions:
      - entity: input_number.download_speed_threshold
        state_not: '0'
    row:
      type: custom:slider-entity-row
      entity: input_number.download_speed_threshold
      full_row: true
      max: 50
      step: 1
title: Sliders
show_header_toggle: false

This is how it looks like.

However if I set the hide_state parameter, the state is shown.

type: entities
entities:
  - type: custom:slider-entity-row
    entity: input_number.download_speed_threshold
    full_row: true
    max: 50
    step: 1
    card_mod:
      style: |
        .state {
          font-weight: 600;
          font-size: 120%;
        }
  - type: conditional
    conditions:
      - entity: input_number.download_speed_threshold
        state_not: '0'
    row:
      type: custom:slider-entity-row
      entity: input_number.download_speed_threshold
      full_row: true
      hide_state: false
      max: 50
      step: 1
      card_mod:
        style: |
          .state {
            font-weight: 600;
            font-size: 120%;
          }
title: Sliders
show_header_toggle: false

The state is shown on the conditional row. However, the formatting is done correctly.

By playing around with card-mod, I was able to format the state value for the conditional row.

type: entities
entities:
  - type: custom:slider-entity-row
    entity: input_number.download_speed_threshold
    full_row: true
    max: 50
    step: 1
    card_mod:
      style: |
        .state {
          font-weight: 600;
          font-size: 120%;
        }
  - type: conditional
    card_mod:
      style:
        slider-entity-row$ div: |
          .state {
            font-weight: 600;
            font-size: 120%;
          }
    conditions:
      - entity: input_number.download_speed_threshold
        state_not: '0'
    row:
      type: custom:slider-entity-row
      entity: input_number.download_speed_threshold
      full_row: true
      hide_state: false
      max: 50
      step: 1
title: Sliders
show_header_toggle: false

Just thought of sharing this.

Schimmelreiter · June 30, 2021, 7:15am

Hi there,

I want to use the slider inline within a multiple-entity-row. But the input_number I want to see as slider just shows up as number:

What am I doing wrong?

        - type: horizontal-stack
          style: |
            ha-card {margin-top: -15px; }
          cards:
            - type: entities
              entities:
                - type: custom:multiple-entity-row
                  entity: binary_sensor.irrigation_unlimited_c2_z1
                  show_state: false
                  secondary_info: last-changed
                  entities:
                    - icon: mdi:toggle-switch-outline
                      name: Aktivierung Zone
                      state_color: true
                      tap_action:
                        action: call-service
                        service: irrigation_unlimited.toggle
                        service_data:
                          entity_id: binary_sensor.irrigation_unlimited_c2_z1
                    - type: custom:slider-entity-row
                      entity: input_number.iu_zone_1_run_time
                      full_row: true
                      max: 60
                      step: 1
                      card_mod:
                        style: |
                          .state {
                            font-weight: 600;
                            font-size: 120%;
                          }
                    - icon: mdi:gesture-tap
                      name: Beregne Zone
                      state_color: true
                      tap_action:
                        action: call-service
                        service: script.iu_start_bewaesserung
                        service_data: {}
                        target: {}
                      entity_id: binary_sensor.irrigation_unlimited_c2_z1

Any help would be greatly appreciated!
Cheers,
Hauke

Kabala · July 22, 2021, 5:20am

Maybe that will help you further

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }
          .info.pointer {
            color: #018752;
            font-size: 16px;
            font-weight: bold !important;
            text-overflow: unset !important;
            white-space: unset !important;
          }
      ha-entity-toggle:
        $: |
          ha-switch {
            --switch-unchecked-button-color: #018752;
            --switch-checked-button-color: #bf5e5e;

          }
    entity: binary_sensor.irrigation_unlimited_c1_z1
    state_color: true
    show_state: false
    entities:
      - attribute: current_duration
        name: Dauer
        hide_unavailable: true
      - attribute: time_remaining
        name: Rest
        hide_unavailable: true
      - attribute: percent_complete
        name: Komplett
        unit: '%'
      - entity: input_number.iu_zone_1_run_time
        name: Zeit
        format: precision0
      - entity: switch.zone_1
        toggle: true
        name: false
  - type: custom:slider-entity-row
    entity: input_number.iu_zone_1_run_time
    full_row: true
    step: 1
    hide_state: true
state_color: true
show_header_toggle: false

Schimmelreiter · July 29, 2021, 7:08am

Thank’s for that… I will give it a try…
Meanwhile I tried this:

The first button activates/deactivates the zone, the second contains the slider and the last one fires the event to run and starts blinking in a different color… Still missing the remaining % and duration… So I will try to combine your approach with mine…

sebyldino · July 31, 2021, 8:15am

Hello,
Since last HA update, the slider does not appear if the light is off.

How can I fix it?

klumpo · August 7, 2021, 3:50pm

I would love a bigger and better cover control. Then it will be easier to hit. Please see attached screenshot for a mock up. Thank you!

bigger better cover control resize again

Shutter card is very elegant but it is a bit big and sliding it down or up is a bit difficult when the rest of the page scroll vertically. It is also not possible to just tap a place at the icon and have the cover go to that point. You have to grab the edge and slide it:

Linax · September 29, 2021, 6:59pm

Hi,

With a light dimmer. Would it be possible to have clicking the light bulb to the left toggle the light instead of opening the menu? This would eliminate the need for toggle switch to the right of the slider and give me more resolution on the slider.

elpablillo · September 30, 2021, 10:34am

Same is happening to me… any update about it?
Thanks

sebyldino · October 1, 2021, 2:04pm

It returned to normal after a few days. Maybe a cache problem …

mcpaha · October 24, 2021, 8:34am

Hi!

Sorry for a noob question but how can I add slider also to color-temp?

AleXSR7001 · November 21, 2021, 12:15pm

Hi everyone
I am trying to populate the slider using auto-entities but it seems unsupported. Anybody ever tried this before?

type: vertical-stack
cards:
  - type: custom:auto-entities
    filter:
      include:
        - entity_id: climate.eq_3_*
          options:
            entity: this.entity_id
    card:
      type: custom:slider-entity-row

results in

No entity specified.
entities:

entity: climate.eq_3_living_room

entity: climate.eq_3_dining_room

entity: climate.eq_3_master_bedroom

entity: climate.eq_3_office

entity: climate.eq_3_guest_toilet

entity: climate.eq_3_kitchen

entity: climate.eq_3_master_bathroom

entity: climate.eq_3_walk_in
type: custom:slider-entity-row

gonzotek · November 21, 2021, 2:06pm

This works for me:

type: vertical-stack
cards:
  - type: custom:auto-entities
    filter:
      include:
        - entity_id: light.*
          options:
            type: custom:slider-entity-row
    card:
      type: entities

A slider-entity-row is replacement for an entity row item in an entities card. It can’t be used elsewhere.

AleXSR7001 · November 27, 2021, 7:40am

Is it possible to modify your example to show just one slider that then controls all the entities at once?

i.e. set all thermostats to 18 °C when I go out etc.?

Edit: I do know there is the possibility of using groups, but I am trying to avoid static groups. Otherwise, everytime I add a device that fits a profile, I have to manually add it to the respective group(s).

gonzotek · November 29, 2021, 7:19pm

Not that I know of. You’ll either need to manually manage a group (at least for this example case, how often will you be adding/removing thermostats?) or write some script or automation that can select these entities and use a number input helper. Off the top of my head, I’m not immediately sure how you’d do that, although I think it’s possible without actually trying first

FWIW, groups can be really useful, and although you have to manually add/remove things to them from yaml, you can reload the groups from the Server Controls section of the Configuration ui without having to restart Home Assistant entirely, so it’s not THAT much a pain… just the same, if the HA devs ever do another month of “What the heck”, editing groups/group entities from the UI would be a good request.

PolarLava · December 15, 2021, 9:50pm

I’ve been using slider-entity-row for a long time, but recently I’ve been having issues with it loading. When I load the page with slider-entity-row in a browser (Firefox - Desktop or Mobile, Chrome Desktop) the page loads fine and I can see the sliders, but then after a second they disappear and I get the dreaded red box “Custom element doesn’t exist: slider-entity-row.” When this happens, in the log I see:

hacsfiles/lovelace-slider-entity-row/slider-entity-row.js:1:1 SyntaxError: redeclaration of let o

I had a similar problem with state-switch and I got that to go away by removing it and reinstalling it. Unfortunately with slider-entity-row I’ve done that and I still have the same issue. And now as I’m writing this I tried one other thing (while working in Chrome Desktop)…enabling the debug tools and then doing an “Empty Cache and Hard Reload” gets slider-entity-row to load, but then state-switch doesn’t load. Tried this repeatably and still the same. Closed the debug tools and repeatably reloading the page causes one to load and the other to fail with the “element doesn’t exist” error. And in the log I see the “Uncaught SyntaxError: Identifier ‘e’ has already been declared” for whichever component didn’t load. It seems there might be a conflict between these two components. I’m running current versions of both components via HACS and I’m currently running HA 2021.11.3

PolarLava · December 18, 2021, 10:56pm

@thomasloven What’s your take on this? It seems when I reload the page either slider-entity-row or state-switch initially shows up, but then one or the other disappears. The behavior is pretty consistent in either Chrome or Firefox. Which ever one doesn’t load always shows a “Uncaught SyntaxError: Identifier ‘e’ has already been declared” error in the log. I’m presuming there’s a conflict between these two components when they are in the same scope. (?) Thanks.

Linax · December 25, 2021, 12:10am

Hi

How can i get the buttons for L M H on a fan like you have?
fan

JM123 · December 25, 2021, 2:37am

Fan Control Entity Row in HACS will give you the card.

finity · December 25, 2021, 4:35am

but make sure you are using the correct version of that plugin.

Fan control entity row is for the older HA Fan implementation that uses a speed list.

the new HA requires you to use either percentages or modes. there are plugins available for those as well in HACS.

lowrisk75 · January 2, 2022, 7:39pm

sorry in advance for this super silly post, but I can’t seems to get the slider working at all.
I did add through HACS, which automatically added the resources (/hacsfiles/lovelace-slider-entity-row/slider-entity-row.js?hacstag=1448997001721) inside /settings/dashboards/resources

when I add a light or my IKEA blinds

  - entity: light.downstaire
    name: downstairs
    toggle: true
    type: 'custom:slider-entity-row'

this return “No card type found”