What attribute are you using? It should automatically invert for shadeLevel and shadeTiltLevel.
I’m using Custom. I only have, custom, audio, and light
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.
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:
- 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.
Bar works with no issues…
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:
3 Likes
Works great thank you for this modification and explanation. 
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.
1 Like
@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.
It seems like the underlying ‘Range’ library that was used for this Custom Tile doesn’t support iOS 12.
It’s not something I’m likely to tackle for this custom tile as the devices that are stuck on iOS 12 were released 10+ years ago.
1 Like
That makes a lot of sense.
Thanks!
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.
Hi! First of all, thanks for this custom tile!
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”).
Any ideas what am I doing wrong?
How do you have the slider configured (eg. which attribute)? Presumably something like Custom with shadeLevel as the attribute?
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.
Did anybody has such issue (mentioned above) to help me where to look for a solution?
The locations you mentioned are correct, but the results are unexpected.
Regarding the Home Assistant log snippet you shared, it appears to be related to the default HASS “Lovelace” dashboard and a custom “Mushroom” extension. It’s not clear to me where you grabbed that from though? Either way, that’s not relevant for our particular analysis – we can circle back to it, but if things are failing before the command is ever sent, we might need to focus elsewhere
When you send a command with the Custom Tile, I would expect that a relevant network request entry would show up in the Network tab of your browser Developer Tools. Here’s a brief example showing where I see the setLevel command successfully sent for a normal dimmable light:
If you don’t see anything in the network tab, then I would at least expect to see some sort of warning or error in the console tab. Note that you may want to enable all the logging levels:
It would be more helpful to know exact details of what capabilities and commands your device supports and one (or more) of the specific configurations you tried in the tile.
You can find the details about the device in SharpTools too:
- Open your SharpTools User Page
- Tap the
...next to the location in question - Scroll down and tap the device in question
- Share screenshots or highlight and copy-paste the relevant details about the device.
Note: I would also switch the ‘Show Advanced’ toggle in the top-right corner and share the Doc ID as I can take a closer look at the details reported for the device.
The Effective Ways to Seek Help and Troubleshoot post is also a good read.