![Circle fill gradient trick](https://global.discourse-cdn.com/inductiveautomation/original/3X/0/6/061242577aa5acf115d9e535c29b9031e1402a3e.gif)
On the label component add props.style.background
(edited, thanks, @pascal.fragnoud) and create an expression binding to the variable to be displayed. In my case it's the slider.
"linear-gradient(0deg, #ff0000 0%, " // start red
+ "#ff0000 " // continue to cut-off
+ {../Slider.props.value} + "%, "
+ "#ff000000 " // then transparent for remainder
+ {../Slider.props.value} + "%)"
3 Likes
I'm not sure if I'm missing something here, but in case someone else is confused too:
This goes in the props.style.background
property.
Also, you don't need the 0% color (just like you don't need the 100% color):
"linear-gradient(0deg, " // start red
+ "#ff0000 " // continue to cut-off
+ {../Slider.props.value} + "%, "
+ "#ff000000 " // then transparent for remainder
+ {../Slider.props.value} + "%)"
Will do the same thing.
3 Likes
Your message wasn't there yet, because of the time difference between France and Australia.
Haha, that checks out. I would tell you all what the stocks are going to do in your future tomorrow (my today), but I wouldn't want to jinx anything by changing your future sorry ![:pensive: :pensive:](https://emoji.discourse-cdn.com/twitter/pensive.png?v=12)
4 Likes