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.
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
