Vertical Range Input (Slider/Dimmer)

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:

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

Vertical Range Input

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.

:arrow_double_down: Import Vertical Range Input - Custom Tile

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

2 Likes

This is great and looks really slick.

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

What attribute are you using? It should automatically invert for shadeLevel and shadeTiltLevel.

I’m using Custom. I only have, custom, audio, and light

image

I’m using “position” as the other attributes weren’t coming up at all. If it matters, it is a Its a lutron shade on hubitat.

image

I updated the Custom Tile with position as one of the top-down attributes. You can update from source to get the enhancement.

Edit: And added tilt as well as Hubitat uses that for Window Blinds.

1 Like

Great job, Tried to use it for Window Shades. Need some improvement:

  1. Font is small, If I increase it this will overlap the level
  2. 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.

Bar works with no issues…
image

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:

2 Likes