Slider element on Picture Elements card

Configuration Frontend
3

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:

regularslider

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:

onkyoslider

Hopefully you will find this post useful for the kind of implementation you are looking for.

Cheers!

4 Likes