šŸ”¹ slider-entity-row - Add sliders to entities cards

Wow.

I never thought of this, but you actually CAN do that!
Youā€™ll need a mirror that sets the correct MIME-type, though.
Try https://cdn.jsdelivr.net/gh/thomasloven/lovelace-slider-entity-row/slider-entity-row.js instead.

I wouldnā€™t recommend it, for a variety of reasons, though. But it does work most of the time.

Thanks! Can you explain why itā€™s not recommended?

  • Latency
  • More things that can break, e.g. your internet connection, jsdelivr, github or anything in between.
  • Updates may be forced on you
  • Updates may not fall through correctly due to caching.

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.

image

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.

image

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

image

Just thought of sharing this.

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

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
1 Like

Thankā€™s for thatā€¦ I will give it a tryā€¦
Meanwhile I tried this:
image
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ā€¦ :wink:

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

How can I fix it?

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:

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.

Same is happening to meā€¦ any update about it?
Thanks

It returned to normal after a few days. Maybe a cache problem ā€¦

Hi!

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

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

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.

1 Like

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).

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 :slight_smile:

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.

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

@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.

Hi

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