Hello dear HA enthusiasts!
I’m in the process of making some cards for my lights, using Picture Elements.
But it seems that neither HA, nor google can point me to a thing i’m missing: Slider!
Is there any way to put a slider on Picture Elements card as an item?
Would be really cool to have Brightness control on this card…
Any info much appreciated!
you probably need to create a separate Input Number and have an automation pick up the changes and control your light.
Then just add the input_slider on your picture elements
Good day,
I was actually looking for a solution myself and haven’t found anything in this forum nor Google.
As @lolouk44 mentionned, there is a way using the input number. The problem at this point resides in the fact that the picture-elements card won’t recognize the entities card and you would need this card in order to integrate your newly-created slider (aka input number).
One thing worth mentioning, even though I had problem using built-in card types in the picture-elements card, I never had problems using custom ones. So, the work around I’ve found in order to make the whole thing work is to use the vertical-stack-in-card custom card and to declare an entities card in it.
FIrst off, to do so, I’ve created the input number slider in my configuration.yaml:
input_number:
slider1:
name: Slider
initial: 30
min: -20
max: 35
step: 1
Then, I’ve added the slider to the picture-elements card, embedded in a vertical-stack-in-card card like stated above:
- type: picture-elements
#title: Motion Sensors
image: /local/buttonbackground-lovelace/home-theater-screen-up-down-borders.jpg
elements:
- type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- input_number.slider1
[...and bunch of lines of code for the remainder of the card...]
The end result would end up like this:
On a personnal note, even though the solution I’ve described so far works, I find the slider-entity-row custom card to be way much better and versatile than the slider built into the entities card. Since this card is a custom one, the vertical-stack-in-card workaround wasn’t needed:
- type: picture-elements
#title: Motion Sensors
image: /local/buttonbackground-lovelace/home-theater-screen-up-down-borders.jpg
elements:
- type: custom:slider-entity-row
entity: media_player.onkyo_tx_nr757
style: {left: 50%, top: 50%}
[...and bunch of lines of code for the remainder of the card...]
And this gives right away a solution closer of what I need:
Hopefully you will find this post useful for the kind of implementation you are looking for.
Cheers!
I actually found out right after I posted that you can add most custom cards to picture elements cards as elements, so I did this exact same thing. Works great. thanks.