Change color of progress bar by range (perspective view)

Hi everyone;

I would like to change the color of a progress bar by range. for example, from 0% to 30% the color is green, from 31% to 75% the color of the progress bar changes to yellow and then from 76% to 100% the color has to be red.
What properti would work for this?

Best regards

I mocked this up with props.bar.color. I used a binding that references the props.value and uses a map transform to set the ranges.

2 Likes

If you want to be really cool then add some CSS transition settings. (The animated GIF below doesn’t quite do it justice.)

slider background color transition
Figure 1. The transition effect.

slider background color transition settings
Figure 2. The settings.

transform 0.5s linear gives the smooth, slightly delayed motion.
background-color 2s ease gives the fade from one color to another.
Adjust the timings to suit.

These are CSS properties and there are many tutorials on the web. You can start at W3Schools.

3 Likes

my progress bar is binded to a PLC timer tag and I get an error

Can you post the error?
What property of the progress bar is bound to the tag?
What are the upper and lower bounds of the tag?


this is my tag binding


and this is what i get when i edit the property

I was doing it wrong, but now i Fixed it, Thanks a lot!!!

It’s seems issue in the tag itself.as per shared screen value not appears. Check tag value in tag browser

Yes, you can have either a tag binding or a property binding. Selecting one disables the other.
As you have probably discovered, you needed to apply the map transform to the tag binding.