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

[19roland70 (Roland)]

I have a problem see screenshot.
Only by the last group "Eetkamer " I see an slider.

Here is the code.yaml.

type: entities
title: Woonkamer
entities:
  - entities:
      - entity: light.hue_ambiance_spot_1
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:track-light
        name: Hue spot 1
        toggle: true
        type: custom:slider-entity-row
      - entity: light.hue_ambiance_spot_2
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:track-light
        name: Hue spot 2
        toggle: true
        type: custom:slider-entity-row
      - entity: light.hue_ambiance_spot_3
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:track-light
        name: Hue spot 3
        toggle: true
        type: custom:slider-entity-row
    head:
      type: custom:slider-entity-row
      entity: light.spots_achter
      hide_when_off: false
      hold_action:
        action: more-info
      icon: mdi:track-light
      name: Spots achter
      toggle: true
    hold_action:
      action: more-info
    type: custom:fold-entity-row
  - entities:
      - entity: light.hue_ambiance_spot_4
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:track-light
        name: Hue spot 4
        toggle: true
        type: custom:slider-entity-row
      - entity: light.hue_ambiance_spot_5
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:track-light
        name: Hue spot 5
        toggle: true
        type: custom:slider-entity-row
      - entity: light.hue_ambiance_spot_6
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:track-light
        name: Hue spot 6
        toggle: true
        type: custom:slider-entity-row
    head:
      entity: light.spots_midden
      hide_when_off: false
      hold_action:
        action: more-info
      icon: mdi:track-light
      name: Spots midden
      toggle: true
      type: custom:slider-entity-row
    hold_action:
      action: more-info
    type: custom:fold-entity-row
  - entities:
      - entity: light.schemerlamp_woonkamer
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:lamp
        name: Schemerlampen
        toggle: true
        type: custom:slider-entity-row
    head:
      entity: light.schemerlampen
      hide_when_off: false
      hold_action:
        action: more-info
      icon: mdi:lamp
      name: Schemerlampen
      toggle: true
      type: custom:slider-entity-row
    hold_action:
      action: more-info
    type: custom:fold-entity-row
  - entities:
      - entity: light.hue_ambiance_lamp_1
        hide_when_off: false
        hold_action:
          action: more-info
        icon: mdi:ceiling-light
        name: Eetkamer
        toggle: true
        type: custom:slider-entity-row
    head:
      entity: light.hue_ambiance_lamp_1
      hide_when_off: false
      hold_action:
        action: more-info
      icon: mdi:ceiling-light
      name: Eetkamer
      toggle: true
      type: custom:slider-entity-row
    hold_action:
      action: more-info
    type: custom:fold-entity-row

And this are the warnings:

Configuration errors detected:

* Required key "entities.0.entity" is missing.
* Required key "entities.0.name" is missing.
* Required key "entities.0.tap_action" is missing.
* Required key "entities.0.view" is missing.
* Required key "entities.0.view" is missing.
* Required key "entities.0.view" is missing.
* Required key "entities.0.conditions" is missing.
* Required key "entities.0.url" is missing.
* Required key "entities.0.entity" is missing.
* Required key "entities.0.attribute" is missing.
* Required key "entities.0.name" is missing.
* Required key "entities.0.service" is missing.
* Required key "entities.1.entity" is missing.
* Required key "entities.1.name" is missing.
* Required key "entities.1.tap_action" is missing.
* Required key "entities.1.view" is missing.
* Required key "entities.1.view" is missing.
* Required key "entities.1.view" is missing.
* Required key "entities.1.conditions" is missing.
* Required key "entities.1.url" is missing.
* Required key "entities.1.entity" is missing.
* Required key "entities.1.attribute" is missing.
* Required key "entities.1.name" is missing.
* Required key "entities.1.service" is missing.
* Required key "entities.2.entity" is missing.
* Required key "entities.2.name" is missing.
* Required key "entities.2.tap_action" is missing.
* Required key "entities.2.view" is missing.
* Required key "entities.2.view" is missing.
* Required key "entities.2.view" is missing.
* Required key "entities.2.conditions" is missing.
* Required key "entities.2.url" is missing.
* Required key "entities.2.entity" is missing.
* Required key "entities.2.attribute" is missing.
* Required key "entities.2.name" is missing.
* Required key "entities.2.service" is missing.
* Required key "entities.3.entity" is missing.
* Required key "entities.3.name" is missing.
* Required key "entities.3.tap_action" is missing.
* Required key "entities.3.view" is missing.
* Required key "entities.3.view" is missing.
* Required key "entities.3.view" is missing.
* Required key "entities.3.conditions" is missing.
* Required key "entities.3.url" is missing.
* Required key "entities.3.entity" is missing.
* Required key "entities.3.attribute" is missing.
* Required key "entities.3.name" is missing.
* Required key "entities.3.service" is missing.

What I’m doing wrong?

[moto2000 (David)]

Did you update to core-2021.0.6b1? I started having the same issue after testing out the beta

[Mariusthvdb (Marius)]

using the beta 2 now, but hadnt seen the issues you report, and all sliders behave properly.

you seem to use an odd config though, with double entities:

change that first to single use and report back?

type: entities
title: Woonkamer
entities:
  - entity: light.hue_ambiance_spot_1
    hide_when_off: false
    hold_action:
      action: more-info
    icon: mdi:track-light
    name: Hue spot 1
    toggle: true
    type: custom:slider-entity-row
  - entity: light.hue_ambiance_spot_2
    hide_when_off: false
    hold_action:
      action: more-info
    icon: mdi:track-light
    name: Hue spot 2
    toggle: true
    type: custom:slider-entity-row

etc etc

[moto2000 (David)]

Seems like several others are having the same issue, there are a few issues open on the Github. Here is the more active one:

Sliders not visible since 2021-05 update for light-group entities if the light is off

[19roland70 (Roland)]

Since the last update it’s works again.

[maskazz]

Hi All.
Here code to high customize sliders:

type: entities
debug_cardmod: true
entities:
  - type: 'custom:slider-entity-row'
    entity: light.blablabla
    full_row: true
    toggle: false
    hide_state: true
style:
  .: |
    ha-card {   --ha-card-box-shadow: 0px;
    background-color: rgba(255, 255, 255, 0.4);   
    border: 1px solid rgba(100, 100,100, 0.4);    
    border-radius: 10px;
    box-shadow: -1px -1px 7px 3px
    #fff, 2px 1px 7px 2px   rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.7);
    height: 16px;
     }
  '#states div':
    slider-entity-row:
      $: |
        ha-slider {   
           height: 37px;
           border: 1px solid rgba(255, 255,255, 0.8);
           box-shadow: inset 3px 3px 10px 5px rgba(0,0,0, 0.1), inset -3px -3px 10px 5px rgba(255,255,255, 0.4);
           border-radius: 10px;
           padding: 0px 12px 10px 2px;
           color: black;
           paper-progress-container-color: black;
           paper-progress-height: 1px;
           --paper-progress-container-color: rgba(0, 0, 0, 0.0);
           --paper-progress-height: 0px;
         }
  slider-entity-row:
    $:
      ha-slider:
        $:
          '#sliderKnob': >
            .slider-knob {border-radius: 7px} .slider-knob {padding: 40px 40px
            0px 0px} .slider-knob {border: 1px solid rgba(100, 100,100, 0.4)}
            .slider-knob {background-color: rgba(255, 255,255, 0.9)}
            .slider-knob {width: 0px}    .slider-knob {height: 0px}     
            .slider-knob {box-shadow: inset 2px 2px 2px 1px rgba(0,0,0, 0.05),
            inset -2px -2px 7px 1px rgba(255,255,255, 0.9)} .slider-knob-inner
            {border: 0px} .slider-knob-inner {background-color: rgba(0, 0,0,
            0.0)} .slider-knob-inner::after  {background-color: rgba(0, 0,0,
            0.0)} .slider-knob-inner::before  {background-color: rgba(0, 0,0,
            0.6)} .slider-knob-inner::before  {border: 0px)}
          paper-progress:
            $: >
              #progressContainer {background-color: rgba(0, 0, 0, 0.0)}
              #primaryProgress {background-color: rgba(0, 0, 0, 0.0)}

Effect:

[sofakng (John)]

Can this be added as a resource directly from GitHub?

Example: https://raw.githubusercontent.com/thomasloven/lovelace-slider-entity-row/master/slider-entity-row.js

(I’ve tried and it doesn’t seem to work)

[thomasloven (Thomas Lovén)]

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.

[sofakng (John)]

Thanks! Can you explain why it’s not recommended?

[thomasloven (Thomas Lovén)]

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

[kaizersoje]

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 (Hauke)]

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 (Cata)]

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 (Hauke)]

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]

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

How can I fix it?

[klumpo (JonM)]

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!

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:

Shutter Card

This card allows to open, close or set a shutter to the opening rate you want. [image] Instructions You will find every instructions to install and configure this card on the dedicated GitHub page Notes I know this card doesn’t fit well in an horizontal card but I didn’t manage to do it as the width of the card can be really small in that case. So please avoid to use horizontal card even if it can works well for some of you. If you are a good designer and can paint a beautiful shutter in…

[Linax]

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 (Pablo M)]

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

[sebyldino]

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

[mcpaha]

Hi!

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