Sliders instead of the big Bulb?

Configuration
1

Hi there, i have flashed the code for dimming my 9x 12V Lamps in my Partyroom on an ESP8266 with ESPHome…
It works fine, but how can i change it in HA to get some small sliders instead of those big round Bulbs?

  - title: Partyraum
    path: partyraum
    badges: []
    cards:
      - type: light
        entity: light.partyraum_lampe1
      - type: light
        entity: light.partyraum_lampe2
      - type: light
        entity: light.partyraum_lampe3
      - type: light
        entity: light.partyraum_lampe4
      - type: light
        entity: light.partyraum_lampe5
      - type: light
        entity: light.partyraum_lampe6
      - type: light
        entity: light.partyraum_lampe7
      - type: light
        entity: light.partyraum_lampe8
      - type: light
        entity: light.partyraum_lampe9

9 Sliders on one card would be fine.
Also i would like to have a switch for turning all 9 off/on.

(I am still a HA beginner, so sorry if a question may be stupid)

2

Look for the slider-entity-row card in HACS.

1 Like
3

Came here to say the same thing:

Make a group containing all 9 switches. When you turn on/off the group, its members will be turned on/off. Better yet, make a Light Group because your devices are lights, not switches. A Light Group not only lets you turn on/off all its members, you can also control their brightness (and other properties).

4

adding a group is a good idea!

But i cant install that slider-entity, i do not have the supervisor-mode in my HA.
Is the card-mod.js file the only one to copy to /www folder?

I have never done this before…

5

Follow the guide here: Lovelace Plugins · thomasloven/hass-config Wiki · GitHub

6

i have downloaded the slider-entity-row.js as raw and saved it, but i can`t get it installed.
There is a red warning about the url…
An Advanced button can i not find.
see here:

2021-11-15
2021-11-151443×951 51.7 KB

7

You have to add it to resources not to dashboard

8

But best would be to install HACS first
That makes it easier

9

my HA is in German, is Resources the button down on the bottom?
And where should be the “advanced” button? can’t find this

10

Resources is the second tab in your screenshot
But as I said, try to install HACS. It makes it easier for you to add custom cards like this

11

ok, i found the resources tab and could install the .js.
I refreshed my browser.
but where can i find this now?

I will be looking at HACS tommorow…

12

You now need to adjust your view and add the custom card to your entity card

13

grrr…

Custom element doesn't exist: slider-entity-row.

type: 'custom:slider-entity-row'

Do i have to restart HA for getting this?
EDIT: restart didn’t change that…

Well, for tonight i thank you for the help, i will see further tomorrow, have a good night.
Wolfram.

14

Did you refresh the resources?
image

15

no, where can i find this menu?
shouldn’t be refreshed with a restart too?

16

It is on the right corner of your dashboard
But yes. Also a restart does it

17

Saved it where? I think the reason it doesn’t work for you is that you either copied it to the wrong place or set the Resources path incorrectly.

You must save it in the www directory or, if you wish, within a sub-directory of www.

For example:

  1. I created a directory within www called slider-entity-row
  2. I copied slider-entity-row.js to the slider-entity-row directory
  3. In Resources, I referenced it using /local/slider-entity-row/slider-entity-row.js

For Resources, “local” means the “www” directory (which is a sub-directory of config and if it doesn’t exist then you must create it first).

I didn’t need to restart; if slider-entity-row is installed correctly, it’s immediately available. I created an Entities card, selected a light, and then, in YAML mode, modified the way the documentation’s example shows.

Screenshot from 2021-11-15 16-13-41
Screenshot from 2021-11-15 16-13-411007×285 18.1 KB

EDIT

Typo. “slider” not “slide”

18

ok, i made an www folder.
Path is: /home/homeassistant/.homeassistant/www/slide-entity-row/slide-entity-row.js
still doesn’t find it… :frowning:

EDIT: Ahhh, the file name seems to be changed from slide… to slider… !
Now i can use it and

type: entities
entities:
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe1
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe2
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe3
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe4
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe5
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe6
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe7
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe8
  - type: 'custom:slider-entity-row'
    entity: light.partyraum_lampe9

2021-11-15 (1)
2021-11-15 (1)1433×958 40.7 KB

Works fine!

T H A N K you A L L for that help!

Next step will be install HACS because this will be not the only nice thing to install!

Good Night,
Wolfram.

PS: maybe i need some help with the group, to switch all Lamps on/off…

1 Like
19

Glad to hear you finally got it to work.

You should know that the Solution tag is normally assigned to the first post, or most complete post, in the thread that provides answer to the question (i.e. the first post that solves the problem). In this case, it was potts-mike that was first to suggest the use of the slider-entity-row card so that’s the obvious post to mark with the Solution tag.

For more information, refer to guideline 21 in the FAQ.

1 Like
20

Ok, i will mark the first post instead!
thanx