After releasing a custom tile for the Volume Control Tile feature request, we heard your feedback that you wanted a similar control for controlling your lights, so we’ve put together a general purpose Vertical Range Input custom tile:
This requires SharpTools frontend version 240510.xxxx or newer, so make sure to refresh the page on any devices that will be using these Custom Tiles to pull in the latest updates.
This provides an input control that works with pretty much any numeric attribute from a Thing including volume level, dim level, window shade position level, and more.
There are a variety of settings you can configure:
Thing Type - select from ‘Audio Volume’, ‘Switch Level’ and ‘Custom’
Thing - based on your selected Thing Type, the thing list will be filtered to matching device types
Range - specify the minimum and maximum values for the range
Format: min-max → 0-100
Step - incremental volume steps for each adjustment
0: disables the step lines, uses default increment of 1
1: enables the step lines, uses default increment of 1
2-100: volume adjustments will snap to the increment you specify
Endpoint Indicators - display -/+ indicators on the endpoints or not
Show Handle - show a visual indicator of a handle for dragging
This is best combined with the endpoint indicators set to none
Custom Thing Types
When selecting a Thing Type of Custom, you’ll be presented with the option of choosing any attribute from any thing you have authorized, but note that you must select a valid numeric attribute.
Internally, the command used for setting the attribute follows the standard implemented by official device drivers and most community drivers of: setAttributeName()
Example Attributes & Commands (tap to expand)
Attribute
Command
level
setLevel
colorTemperature
setColorTemperature
fanSpeed*
setFanSpeed*
volume
setVolume
shadeLevel
setShadeLevel
shadeTiltLevel
setShadeTiltLevel
coolingSetpoint
setCoolingSetpoint
heatingSetpoint
setHeatingSetpoint
Limited support in Hubitat.
Demo
Here’s a quick demo showing this alongside some (view-only) Gauge Custom Tiles:
I dont have access to the beta thread, so sorry if already answered. How do I get it to be inverted for the shades. For the shade I tried it on, it still goes from low to high (like the dimmable light).
Great job, Tried to use it for Window Shades. Need some improvement:
Font is small, If I increase it this will overlap the level
Is there a way to control the transparency of the bar. It will be great to have ability to control the colors. In the picture it is 30%. the 30% part looks almost like the 70% part.
I’ve pushed out a few updates to the Vertical Range Input - you can update from source to pull in these enhancements. The range now has a ‘glass’ effect on the background which makes it look much better on complex backgrounds.
As you may have noticed when reviewing the Custom Tile code, there’s a number of CSS variables which are declared at the top of the tile. You can use these to customize some of the key visual aspects of the tile:
/*
Base CSS Variable Declarations: feel free to adjust these, but note that
any changes saved will apply to ALL instances of this Custom Tile, so you
may want to import a second copy of the tile if you want to keep the original
version too
*/
:root {
--width: 35vw;
--height: 90vh;
--radius: 10vw;
--thumb-height: calc(var(--radius) * 2);
--offset-top: 0vh;
--opaque-white: rgba(255,255,255,0.2);
--track-color: var(--opaque-white);
--progress-color: var(--opaque-white);
--font-color: #FFFFFF;
--tooltip-visibility: visible; /* visible | hidden */
--tooltip-horizontal: 0.96; /* 0=left, 0.5=center, 1=right */
}
For example, the track-color and progress-color are exposed as variables. They default to the value of the opaque-white variable, so you can increase the opacity of that color or change each color independently.
I’ve also added an offset-top value which you could use to add more space to the top of the tile. For example, adjusting the offset-top: 7.5vh; and height: 85vh; adds enough space for the standard top label size:
Update 2:
Although ir works great on mobile (android) and desktop (windows) it seems not to work properly on the old ipad assigned for sharptools display (ios 12). I get the tile but not the slider.
This is true with various browsers. Not just Safari.
Any idea or changes to the code I can implement to get it to work? This is so close @josh@James
**Update1: **
Reconnecting the Smartthings authorization refreshed the list and my new devices appeared.
The used sequence is:
• Added a virtual slider switch in my.smartthings.com
• Used the dashboard slider to control the switch level attribute
• used a rule in Sharptools to trigger as the attribute changes and to assign the value to a variable, and then assign this variable value as the switch level attribute to each bulb
Quite a detour but it works
This is very close to what I’ve been looking for to control multiple dimmable lights together.
Is there any way to use it with a variable?
I can’t see any variables or a virtual dimmer I created. I’m trying to create a rule to update each light level based on a single action in sharp tools, not 3 (one per bulb).
Thanks in advance.
I didn’t transpile it for old browsers, so it’s possible that one of the features used in the code isn’t available on old browsers. Here’s a version run through our standard transpiler, but I haven’t actually tested it…
PS. I would note that all browsers on iOS / iPad OS use the Safari rendering engine under the hood – even Chrome. So it’s more a factor of the iPad running such an old OS version that has an old browser engine bundled with it.
@josh Thank you for the quick and educating response
The old ipad now shows the slider on top of the tile, but it is unresponsive to touch.
If there’s anything to be done about it and you’re willing - I will be gratetful.
Just now got around to try these after all these months. I like it and am quickly expanding use cases! One unique thing I noticed is that “copying” a vert.r.i. custom tile links them so that any future style changes copy to the source and copied tile. The upside, the tile can be modified to a different thing / attribute selection in the edit, at least I think. Anyhow, not a big deal, but just noticed that it may require building each one from scratch in case someone used the copy feature. Thanks!
Does anyone have any suggestions as to how to make the color of either the dimmer or the progress bar colors change based on if the dimmer is on or off…
I’ve tried w/ CSS / Java (I’ve never coded, so i tried chat gpt) but cant get it to work. I’d just like it to differentiate if the light is on or off by color (either ofthe track/progress or even the background)… Coudl this eventually have a style by state option?
Disregard the color gradient… but I was wondering if a simpler version of this might work? Basically brighter if no. but still showing prior level when off.
That’s a really neat idea. Is that purely a mockup or was that generated with some sample code and you’re just looking for pointers on how to finish out the sample code?
I think that image this was a mockup… someone on HA may have tried to code it, but unsure if they actually implemented the different colors based on state. examples in the following code don’t seem to light up when on like the mockup.
For me, I’m just looking for some tips for the code… I’ve changed the color to what I like but was hoping to have it dimmer colors if off. I’ve tried incorporating a variable that says on or off (instead of trying to find device state), but i’m way too new at this.
I like being able to alter to color w/ css code to something I like, but just wish i could make a dimmer set of colors if the device was off.
I hope someone can give me an idea to help me to solve the problem.
In short, the main problem is that the slider simply doesn’t work for me. I’m trying to control the blind covers, the thing from the Home Assistant is connected to the tile, but when I move the slider, it does nothing. The control directly from the home assistant works as it should. I tried with 6 different things/covers - nothing.
The other thing (which is irrelevant until I get the slider to work) is that I can’t get it to look as a top-down attribute (I set the custom attribute to “currentPosition”).
Have you checked the Home Assistant logs to see what command is being sent to Home Assistant? If you are on a computer, you could also check the network tab of the browser console while you try to send a command from the custom tile as the network tab would show the command name like setShadeLevel as the final part of the URL.
Hi Josh, I set Custom thing type and tried with every available attribute.
In the Home Assistant logs, I can see this one - not sure, but it could be the relevant log?
2024-11-11 11:40:23.334 ERROR (MainThread) [frontend.js.latest.202407100] Uncaught error from Chrome 130.0.0.0 on Windows 10
Error: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “mushroom-select” has already been used with this registry
window.CustomElementRegistry.define (src/scoped-custom-element-registry.js:44:14)
/hacsfiles/lovelace-mushroom/mushroom.js:29:61
/hacsfiles/lovelace-mushroom/mushroom.js:29:76
n (/hacsfiles/lovelace-mushroom/mushroom.js:1:963)
/hacsfiles/lovelace-mushroom/mushroom.js:571:62
Also, when I try to set some position, there is no “Command sent” message in the dashboard.
In the Chrome console I see nothing (maybe I just don’t know where exactly to find it), but when I toggle some light, I see that in the console.
This requires SharpTools frontend version 240510.xxxx or newer, so make sure to refresh the page on any devices that will be using these Custom Tiles to pull in the latest updates.
Import Vertical Range Input - Custom Tile
