Custom light slider/dimmer

Working on a frontend for my smart home. I’d really like to create some custom vertical dimmer switches, something like these:

or like the ios vertical dimmer switch:

Any idea where I can get started? I was thinking a roundabout way with picture elements and various states but it doesn’t give me the input control I would need…any suggestions appreciated



Check this thread: Card Tools popup? (Homekit style card )

I made a custom front-end and 2 types of cards with the second example as brightness slider. You van user that OR check the code and user it in your pen.

Thanks @DBuit! A little different than what I’m looking for in two ways

  1. I’m hoping for something static that doesn’t require a popup - for example how on the regular thermostat card you have a standing visual representation and you can click and drag it

  2. something where I can control the styling (not as essential, but would obviously be nice).

So basically something more like the first picture:

Any additional thoughts and recommendations are very welcome

@stingray072 looks really cool and could be build as a custom card.

i think you can use my code to make it so it can use multiple entities and show multiple sliders next to each other and add a on/off button at the bottom. But dont know how could your programming skills are?

1 Like

@stingray072 i made a codepen with the html that could be the start of a custom card maybe you can use it.


It’s scary how quickly you made this and good it looks! My programming skills are very limited but I’ll try to play around with it- seems like a good learning opportunity.

Thank you!!

DBuit made this available here: Custom Lovelace Card - Control lights better on tablets

I also use a card made by @DBuit very very nice indeed.

I did modify it slightly to match my own theme which I will share to my repo soon (I still need to push out a PR on his repo for the css changes I made).

I only wish I had the skills to create a card like this so I could recreate the Homekit Thermostat.

Anyways once again a big thanks to @DBuit

1 Like

@jimz011 when are you gonna give me the pull request waiting for it :stuck_out_tongue_winking_eye:

Can you share a picture of the thermostat in homekit maybe i can give it a try to make a pop-up card like i did for the lights.

Srry been so busy lately trying to get my release ready for the general public before the end of the year (not going to make it haha).

I will do the PR tonight (I will first need to learn how haha and I am currently at work) But I have it ready so shouldn’t take to long.

The Homekit thermostat looks like this:

Hi @stingray072,

Did you ever end up building this concept?
It looks very neat, and I’d be quite interested to see the code behind it if you did built it.

@DBuits card does what he wants now. Just use that. You don’t need to use the pop up portion. And you can customize most items. Anything you can’t, use card mod.

Why do people share pictures but not the code??


Because my project must have been shared like a ton of times here and I do not feel the need to post a link to it with every post I make.

But ofc I am willing to share it again:

:laughing: Love it! Thank you. Somehow this “project” has alluded me. Happy I poked at ya.
WOW, so much to take in.

Documentation Skills :1st_place_medal: