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

Miguel_Alvarez · August 20, 2020, 6:21pm

Hi

Would it be possible set two values in only one slider?. For example to set min and max values of something.
Actually I have two input_number to set minimun and maximun Raspberry’s temperature. And two automations to connect/disconnect the CPU fan: If temp>max then fan on; if temp<min then fan off

It would be so nice a slider like this (I’ll try to draw it in ascii):

Fan interval Min:40 |----O=====================O-------------------| Max:60

or with other values:

Fan interval Min:45 |--------O============================O--------| Max:70

thisIO · August 23, 2020, 8:40pm

Could you please explain where can i find this button

ladaowner · October 20, 2020, 8:16am

How to I get lights added as with slider-entity-row to respect show_header_toggle: true

entities:
  - label: Livingroom
    type: section
  - entity: light.livingroom_bulb_light
    hide_when_off: true
    icon: 'mdi:ceiling-light'
    name: Main
    toggle: true
    type: 'custom:slider-entity-row'
  - label: Mood
    type: section
  - entity: light.tall_bulb_light
    hide_when_off: true
    icon: 'mdi:floor-lamp'
    name: Tall
    toggle: true
    type: 'custom:slider-entity-row'
  - entity: light.desk_bulb_light
    hide_when_off: true
    icon: 'mdi:lamp'
    name: Desk
    toggle: true
    type: 'custom:slider-entity-row'
  - entity: light.sofa
    hide_when_off: true
    icon: 'mdi:led-strip-variant'
    name: Sofa
    toggle: true
    type: 'custom:slider-entity-row'
  - label: Bedroom
    type: section
  - entity: light.mainbedroom_bulb_light
    hide_when_off: true
    icon: 'mdi:ceiling-light'
    name: Main
    toggle: true
    type: 'custom:slider-entity-row'
  - entity: light.bedside_bulb_light
    hide_when_off: true
    icon: 'mdi:lamp'
    name: Bedside
    toggle: true
    type: 'custom:slider-entity-row'
  - label: 2nd Bedroom
    type: section
  - entity: light.2ndbedroom_bulb_light
    hide_when_off: true
    icon: 'mdi:ceiling-light'
    name: Main
    toggle: true
    type: 'custom:slider-entity-row'
  - label: Kitchen
    type: section
  - entity: light.kitchen_bulb_light
    icon: 'mdi:ceiling-light'
    name: Main
  - label: Bathroom
    type: section
  - entity: light.bathroom_bulb_light
    icon: 'mdi:ceiling-light'
    name: Main
  - label: Landing
    type: section
  - entity: light.landing_light
    icon: 'mdi:ceiling-light'
    name: Main
  - label: Hallway
    type: section
  - entity: light.hallway_bulb_light
    icon: 'mdi:ceiling-light'
    name: Main
  - label: Hallway
    type: section
  - entity: switch.car_charger
    icon: 'mdi:car'
    name: Tesla
show_header_toggle: true
title: Lights
type: entities

Lights with type: ‘custom:slider-entity-row’ do not respect the show_header_toggle: true toggle.

fbacker · October 20, 2020, 7:44pm

@Miguel_Alvarez Im after the exact same thing but for a different usage. Would like to set a range of minimum and maximum.

Guessing it’s not possible with this type. Is there another lovelace frontent hacs component that I’m missing?

Denman2103 · October 21, 2020, 8:36am

Yes. I got the same problem. The show_header_toggle doesn’t work on the Custom:slider-entity-row entities anymore.
When you add a normal entity the header toggle show up but only toggles the normal entities in the card, not the slider row entities.

hwinkel · October 22, 2020, 6:46pm

I have the same Problem too, and with the side effect that the header toggle does not work reliable anymore on other cards with the entity slider

Dingin · October 25, 2020, 1:00pm

Have a question, is it possible to invert the value of the cover slider when 100% is totally down (closed) and 0 the blind totally rolled up (open)?
right now 0% is the blind is totally down.

Thanks
Btw it works great!

Matt1976 · November 10, 2020, 4:51pm

Hi there,

I have a question concerning the value shown next to the slider.
At the moment it is by default a percentage value.
My use case is to control lights with DMX channels and values 0 to 255. So I would like to see the set value e.g. 255 instead of a percentage value 100%.
How can I make this happen?

Also I find the behavior of the slider weird that it jumps back to 100% (middle) when set to 255 (max right). Is it possible to change this behavior, so that it stays to set value e.g. 255 (max right)?

Thanks for your advice.

muraj238 · November 20, 2020, 1:54pm

@thomasloven A have a similar, but different problem. One of the sliders is showing percentage, which is correct in this context, but the other one is not, which is the problem. The strangest thing is, it’s still sending percentage values to the ESP, same ones as the first one. Can I somehow control this behavior?

RichardKim06 · November 27, 2020, 6:23pm

Thanks for this card however would it be possible to use one slider to control both the brightness and color temp of a bulb (eg the bulb temp becomes warmer at a lower brightness).

Sand · December 1, 2020, 9:58am

Is there a simple way to add a background image to the slider like this:

brentk · January 10, 2021, 3:44am

Is there anything special needed to get this to work with Google Cast? I am running HA ver 2021.01 and see the same “Custom element doesn’t exist: slider-entity-row” in @Ashwood’s photo on my Nest hub and Chromecast - although they work fine in a normal web browser.
Installed via HACS and files are at:
\config\www\community\lovelace-slider-entity-row

gillman99 · January 11, 2021, 12:09am

This plugin is awesome. Thanks for putting this together.

I have it working and it’s working great, but I get an error in the code and it won’t let me switch back to UI mode. Here’s the error:

UI editor is not supported for this config:

The value of “entities.0” is not supported by the UI editor, we support “Object<{entity,name,icon,image,secondary_info,format,state_color,tap_action,hold_action,double_tap_action}> | string | Object<{type,name,action_name,tap_action,hold_action,double_tap_action}> | Object<{type,view,dashboard,name,icon,hide_if_unavailable}> | Object<{type,row,conditions}> | Object<{type,style}> | Object<{type,label}> | Object<{type,url,name,icon}> | Object<{type,entities}> | Object<{type,entity,attribute,prefix,suffix,name}> | Object<{type,name,service,icon,action_name,service_data}>” but received “{“type”:“custom:slider-entity-row”,“entity”:“light.caseta_r_wireless_in_wall_dimmer”,“name”:“Front Porch”,“toggle”:true}”.

You can still edit your config in YAML.

Here’s the yaml that’s created partially by the UI and adding the slider info in manually:

type: entities
entities:
  - type: 'custom:slider-entity-row'
    entity: light.caseta_r_wireless_in_wall_dimmer
    name: Front Porch
    toggle: true
  - type: 'custom:slider-entity-row'
    entity: light.caseta_r_wireless_in_wall_dimmer_2
    name: Kitchen
    toggle: true
  - type: 'custom:slider-entity-row'
    entity: light.caseta_r_wireless_in_wall_dimmer_4
    name: Dining
    toggle: true
  - type: 'custom:slider-entity-row'
    entity: light.caseta_r_wireless_in_wall_dimmer_5
    name: Family Room
    toggle: true
  - type: 'custom:slider-entity-row'
    entity: light.caseta_r_wireless_in_wall_dimmer_3
    name: Master Bedroom
    toggle: true
  - type: 'custom:slider-entity-row'
    entity: fan.caseta_r_wireless_fan_speed_control
    name: Master
    toggle: true

I want to go back into the UI to change the icons but it will not let me re-enter UI mode. The sliders are working perfectly so not sure what is wrong.

fra · January 16, 2021, 12:56am

Hello!
Someone could point me to the right direction to solve the problem attached??

i’m using the “full row option” but i can’t see the “circle” with the numbers inside correctly…
is there a solution to bring it to front??

I solved adding padding…

      style: |
        ha-card {
          overflow: hidden;
          padding-top: 16px;
          background: transparent;
        }

but the height of the card becomes too much…
help!!!

thanks a lot.

bkr1969 · January 30, 2021, 6:06pm

OK. I’m pretty savvy with HA and coding in general, but I cannot make sense of the myriad of descriptions and inconsistencies around this slider. You cannot add it with the GUI so where does the YAML go to add it manually? Also, what exactly is the path to use? The file seemingly used to be called something else and/or the install instructions are unclear. I installed via HACS and tried to add manually per instructions. I now have 2 URLs:
/hacsfiles/lovelace-slider-entity-row/slider-entity-row.js
/www/community/lovelace-slider-entity-row/slider-entity-row.js

I still get the “custom component doesn’t exist” error. Can someone please give a direct, detailed description from start to finish on how to install and add this to a card?

robertklep · January 30, 2021, 6:52pm

It’s not a custom component though, it’s a frontend resource. So I don’t quite understand where you get that error from.

I’m not entirely sure if this will work (I do everything from YAML, but from what I can see, it’s not necessary): open the HA sidebar and go to “Configuration > Lovelace Dashboards” and select the “Resources” tab. There you should be able to add the module as a resource.

HACS tells you which path to use, but the default path is /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js.

bkr1969 · January 30, 2021, 7:03pm

I have that exact entry already. I’ve cleared my cache and reloaded. I used the code in the raw editor exactly as shown and I get the error.

bkr1969 · January 30, 2021, 7:05pm

Screen Shot 2021-01-30 at 12.03.38 PM

bkr1969 · January 30, 2021, 8:16pm

OK…not sure why it took so long, but it’s working now.

robertklep · January 31, 2021, 8:18am

I forgot to mention that in the top-right menu there’s an option to reload resources:

I find that after reloading resource and performing a “hard” refresh (refresh the browser window with Shift (Mac) or Ctrl (Windows) pressed) it works.