# Change color of progress bar by range (perspective view) **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [March 17, 2022, 9:14pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334 "2022-03-17T21:14:46Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Hector\_Aaron\_Mani\_La](https://avatars.discourse-cdn.com/v4/letter/h/e79b87/32.png) [@Hector\_Aaron\_Mani\_La](https://forum.inductiveautomation.com/u/Hector_Aaron_Mani_La)\ **Post date:** [March 17, 2022, 9:14pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/1 "2022-03-17T21:14:46Z")
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 ---
**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\ **Post date:** [March 17, 2022, 9:53pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/2 "2022-03-17T21:53:35Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aaf02857b30c8fcf245268f39c66dcabe1905a64.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 17, 2022, 10:36pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/3 "2022-03-17T22:36:52Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/15a9940957f22690f2e17d7878741cb55538c4a1.gif) _Figure 1. The transition effect._ ![slider background color transition settings](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/8544a5245e2cca8353e54dc4331407f4533bf717.png) _Figure 2. The settings. **This might not work. See the update on post #15**._ `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](https://www.w3schools.com/css/css3_transitions.asp). ---
**Author:** ![Hector\_Aaron\_Mani\_La](https://avatars.discourse-cdn.com/v4/letter/h/e79b87/32.png) [@Hector\_Aaron\_Mani\_La](https://forum.inductiveautomation.com/u/Hector_Aaron_Mani_La)\ **Post date:** [March 17, 2022, 10:41pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/4 "2022-03-17T22:41:50Z")
my progress bar is binded to a PLC timer tag and I get an error ---
**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\ **Post date:** [March 17, 2022, 10:56pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/5 "2022-03-17T22:56:05Z")
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? ---
**Author:** ![Hector\_Aaron\_Mani\_La](https://avatars.discourse-cdn.com/v4/letter/h/e79b87/32.png) [@Hector\_Aaron\_Mani\_La](https://forum.inductiveautomation.com/u/Hector_Aaron_Mani_La)\ **Post date:** [March 17, 2022, 11:16pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/6 "2022-03-17T23:16:05Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e4a21cb01b2e9bf51459b9f489440dc8159840a2.png) this is my tag binding ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e19cdb5f282e76c7185cd239abac7846b01aec98.png) and this is what i get when i edit the property ---
**Author:** ![Hector\_Aaron\_Mani\_La](https://avatars.discourse-cdn.com/v4/letter/h/e79b87/32.png) [@Hector\_Aaron\_Mani\_La](https://forum.inductiveautomation.com/u/Hector_Aaron_Mani_La)\ **Post date:** [March 17, 2022, 11:20pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/7 "2022-03-17T23:20:33Z")
I was doing it wrong, but now i Fixed it, Thanks a lot!!! ---
**Author:** ![tamerplc](https://avatars.discourse-cdn.com/v4/letter/t/d78d45/32.png) [@tamerplc](https://forum.inductiveautomation.com/u/tamerplc)\ **Post date:** [March 17, 2022, 11:21pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/8 "2022-03-17T23:21:18Z")
It’s seems issue in the tag itself.as per shared screen value not appears. Check tag value in tag browser ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 17, 2022, 11:21pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/9 "2022-03-17T23:21:55Z")
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. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 1, 2024, 7:20pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/10 "2024-06-01T19:20:40Z")
Hi @Transistor, I'm trying to implement your smoothing color change but I can't. The colors change according to the value but without the transiction. Could you tell me where is my mistake please? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d80af12b0ea1914252af7acbbe1708559a7f9853.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 1, 2024, 7:32pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/11 "2024-06-01T19:32:52Z")
Everything looks fine on your screengrab. Copy the progress bar and paste it in here so we can have a look. (See [https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831.](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831.)) ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 1, 2024, 7:34pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/12 "2024-06-01T19:34:53Z")
Here you are, I cannot open your link but I just copy the bar and I paste here the structure ```python [ { "type": "ia.display.progress", "version": 0, "props": { "bar": { "transition": "transform 0.5s linear, background-color 2s ease" }, "style": { "marginBottom": "15px" } }, "meta": { "name": "Progress" }, "position": { "basis": "20px" }, "custom": {}, "propConfig": { "props.value": { "binding": { "type": "property", "config": { "path": ".../Slider.props.value" } } }, "props.bar.color": { "binding": { "type": "property", "config": { "path": ".../Slider.props.value" }, "transforms": [ { "inputType": "range", "outputType": "scalar", "mappings": [ { "input": { "min": 0, "max": 85 }, "output": "#FF0000" }, { "input": { "min": 85, "max": 90 }, "output": "#FFFF00" }, { "input": { "min": 90, "max": 100 }, "output": "#00AA00" } ], "fallback": "#000000", "type": "map" } ] } } } } ] ``` ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 1, 2024, 7:44pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/13 "2024-06-01T19:44:55Z")
That's interesting. It doesn't work for me and neither does the original that I used for the screengrab above. Let me have a think. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 1, 2024, 7:46pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/14 "2024-06-01T19:46:28Z")
😅 I console myself, I thought I could be able to copy anymore 🤣 ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 1, 2024, 8:07pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/15 "2024-06-01T20:07:20Z")
Try this: ![Slider transition](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/553da9059fcf80036b24e1f9d600c1731669ec0b.png) This works for me now and it looks like the right place to add the style. I've no idea how I got it to work previously. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 2, 2024, 11:28am UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/16 "2024-06-02T11:28:34Z")
Yes you're right, under the style it works, thanks for the help. I wonder if should be possible to change the color in a different way, I mean now it actually changes smooth but from a color to another one (for example from red to yellow.. How can I make the color transition linearly, for example, during the change from green to yellow with all the shades between? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 2, 2024, 12:58pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/17 "2024-06-02T12:58:14Z")
> [@Aiasa21](#): > > How can I make the color transition linearly I think you mean having the color property change linearly with value? (This is different to a CSS transition between two distinct states.) Is that correct? ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 2, 2024, 1:05pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/18 "2024-06-02T13:05:54Z")
Yes I'm sorry for the bad explanation.. I should rappresent a production percentage, 100% green, 90% red.. In the middle should be nice that the color changes dynamically with all the small variation of the percentage. As you said is not only an on/off change when the value is reached. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 2, 2024, 1:39pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/19 "2024-06-02T13:39:08Z")
You can do that easily enough with the [Map Transform](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/transforms/map-transform). You'll need a line for 0 - 90, 90 - 91, 91 - 92, etc. Pay particular attention to how the `( )` and `[]` and `( ]` and `[ )` works. You'll need to get the hex values for each of the colors. (It would be very handy if Perspective supported HSL color formats as you could bind the hue to your value and run with a fixed saturation and lightness.) There are many, many tools on the web for this. Here's one: [WorkWithColor color blender](http://www.workwithcolor.com/mm-color-blender-01.htm?cp=FFCC00&ch=48-100-50&cp2=334455&ch2=210-25-27&im=3&cm=1) although it only gives eight steps. ![Color blender](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e18e282888fe523c3b7b71b3974bc4b219994e05.png) ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 2, 2024, 2:13pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/20 "2024-06-02T14:13:10Z")
Thank you @Transistor, this is a great point to start, I'll update you! [Next page](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334.md?page=2)