rangeColors doesn't work properly

[Thisbaut Gobert]

Hello,

I am trying to use the progressbar component with 3 colors :

 <ejs-progressbar

                                id="progressBar"

                                class="clickable"

                                ref="progressBar"

                                type='Linear'

                                :trackThickness='25'

                                :progressThickness='20'

                                :minimum="0"

                                :maximum="100"

                                :value="form.avancement"

                                :rangeColors="[{color: 'red', start: 0, end: 33.99},{color: 'orange', start: 34, end: 66.99}, {color: 'green', start: 67, end: 100}]"

                                trackColor='#c8ced3'

                                :isGradient="true"

                                :animation="progressAnimation"

                                :showProgressValue="true"

                            ></ejs-progressbar>

Actually, if the value is less than 33.99, the progressbar has no color, if the value is between 33.99 and 66.99, the first part of the progress bar is rendered with gradient color and the second and third parts are not rendered.
On click somewhere else, i increase the value of form.avancement by 10.

setAvancement(step = 10) {

            if(this.form.avancement < 100) {

                let progressBar = this.$refs.progressBar.ej2Instances

                for(let i= 1; i <=step; i++) {

                    this.form.avancement ++

                    progressBar.refresh()

                }

            }

        },

I use the latest version of syncfusion : 20.4.38

[Swetha Babu]

Hi Thisbaut,

Greetings from Syncfusion.

When we analyzed the provided sample code, we came to know that you are changing the value of the progress bar. The range colors are applied to the progress color. So, when we set the range colors, based on the value the progress bar gets rendered. For example, if we set the value as 30 and range color start value as 33, then the color is not visible. Please find the below sample link for your reference.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Progressbar1245202572

Code Snippet:

<ejs-progressbar

 

                                id="progressBar"

 

                                class="clickable"

 

                                ref="progressBar"

 

                                type='Linear'

 

                                :trackThickness='25'

 

                                :progressThickness='20'

 

                                :minimum="0"

 

                                :maximum="100"

 

                                :value="value"

 

                                :rangeColors="[{color: 'red', start: 0, end: 33.99},{color: 'orange', start: 34, end: 66.99}, {color: 'green', start: 67, end: 100}]"

 

                                trackColor='#c8ced3'

 

                                :isGradient="true"

 

                                :showProgressValue="true"

 

                            ></ejs-progressbar>

Screenshot:

Please let us know I we have misunderstood the reported scenario. Kindly, revert us if you need further assistance.

Regards,

Swetha