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