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

sbreu03 · March 31, 2021, 1:26pm

Hey,
my goal is to have it like the attached image.
Thanks,
Stefan 31-03-_2021_15-24-40

finity · April 1, 2021, 1:47am

I’ve never tried it but I don’t think you can combine two custom entity rows like that.

I would have no idea what the syntax to make that work would even look like.

And besides, I’m confused about the point.

A boolean is a binary entity - on or off. There shouldn’t be a “slider” associated with a boolean because a slider implies an analog entity.

How would a slider interact with a boolean?

Clodo · April 1, 2021, 10:53am

Hi, i’m using this slider to control motors, a video here: https://twitter.com/Clodo76/status/1377401794741997568
It’s possible to trigger the automation during slider movement?
My motors expect final position, not movement, and i need to send many mid steps as possible to avoid ‘brutal’ repositioning.
Maybe with an hack to apply to the JS directly?
Thanks!

thomasloven · April 5, 2021, 5:54pm

Use an input_number and trigger the automations from that. Then you won’t even need slider-entity-row.

Clodo · April 5, 2021, 7:50pm

Sorry but i don’t understand what you mean, please be patience, i’m a newbie about HA

This (config below) show a slider in lovelace that allow me to simulate my motors, i need to trigger the automation, the send of MQTT, when my finger in mobile HA move the slider, currenty it’s triggered only one time when i release the finger

thx anyway for the reply

# configuration.yaml
input_number:
  holodeck_roll:
    name: Roll
    min: -30
    max: 30
    step: 1
    initial: 0
    unit_of_measurement: "°"
    icon: mdi:angle-acute
    mode: slider

# automations.yaml
- alias: Holodeck Roll
  trigger:
    platform: state
    entity_id: input_number.holodeck_roll
  action:
    service: mqtt.publish
    data:
      topic: house/holodeck/roll/set
      retain: true
      payload: '{{ states(''input_number.holodeck_roll'') | float }}'
  id: 4f5a9071267549f9a77e824607196e07

# lovelace card
type: entities
entities:
  - entity: input_number.holodeck_roll

anon36468094 · April 16, 2021, 7:24pm

Hi,

Will it be possible to add a background to the volume slider? I’m using only the slider to put below a custom:button-card but the background of the slider-entity-row is transparant. Or even better, is there anyway to keep the same layout of my button-card and integrate the slider inside it.

KaherdinTristan · April 18, 2021, 4:02pm

In a simple example;
Can I add padding to the left and or right side of a slider?

type: 'custom:slider-entity-row'
entity: light.kok
name: hide_state
full_row: true
hide_state: true

Posreg · April 29, 2021, 11:10pm

Piepke82:

type: picture-elements
      image: local/images/controls/color_temp_background.png
      elements:
        - type: 'custom:slider-entity-row'
          icon: 'mdi:none'
          name: ' '
          hide_state: true
          full_row: true
          entity: input_number.light_livingroom_color
          style:
            left: 50%
            top: 50%
            width: 400px

That is really nic! can you share your automations as well ?

barrymossel · May 18, 2021, 7:59pm

Since about a week the slider-entity-row for my Shelly dimmer (through) the Shelly integration disappears when it’s turned off. My Tradfri bulb through Zigbee2MQTT does not. How can I fix this? Or should is it a bug in the Shelly integration and should I integrate the Shelly dimmer through MQTT for the time being?

Sand · May 22, 2021, 12:10pm

I am only now seeing your reply. But that looks pretty clever. Thanks!
Have you integrated in a entities card? I am not sure how/if that can be done.

19roland70 · May 30, 2021, 3:05pm

I have a problem see screenshot.
Only by the last group "Eetkamer " I see an slider.
Schermafbeelding 2021-05-27 om 21.28.04
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 · May 31, 2021, 4:18am

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

Mariusthvdb · May 31, 2021, 11:02am

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 · June 3, 2021, 9:33pm

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

19roland70 · June 8, 2021, 3:46pm

Since the last update it’s works again.

maskazz · June 15, 2021, 12:20pm

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 · June 29, 2021, 5:50pm

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 · June 29, 2021, 6:25pm

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 · June 29, 2021, 7:31pm

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

thomasloven · June 29, 2021, 8:40pm

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.