Changing colors depending on value - progressbar component

[Francelink]

Hello

I would like to use the RangeColors class to change the colour of my progressbar according to the value I assign to it.

red from 0% to 25% ; orange from 25% to 75% ; green from 75% to 100%

I tried this type of code (see below) and as you can imagine, it doesn't work because my IDE says that "RangeColor is not found".

Do you have an example I can base this on?

My use :

@(Html.EJS().ProgressBar("container").Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear)

.Value(75).Width("100%").Height("24").ShowProgressValue(true).TrackThickness(24).ProgressThickness(24).Minimum(0).Maximum(100).RangeColors(new RangeColor() {Color = Color.FromHex("ca5151"),IsGradient = true,Start = 0,End = 25}, new RangeColor() {Color = Color.FromHex("fab52b"),IsGradient = true,Start = 25,End = 75}, new RangeColor() {Color = Color.FromHex("8fbe49"),IsGradient = true,Start = 75,End = 100})

.Render())

Best regards,

[Durga Gopalakrishnan]

Hi Francelink,

Greetings from Syncfusion.

As of now, we are facing problem while specifying the range colors for progress bar in tag. So, we have considered this scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 14^th March 2023. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link :  https://www.syncfusion.com/feedback/41624/progress-bar-range-color-is-not-working-properly

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Meanwhile, we request you to use the below suggestion to apply range colors.

@(Html.EJS().ProgressBar("container").Load("progressLoad").Render())

<script>

    function progressLoad(args) {

        args.progressBar.rangeColors = [

            {color : "#ca5151", isGradient : true, start : 0,  end :25 },

            {color : "#fab52b", isGradient : true, start : 25, end :75 },

            {color : "#8fbe49", isGradient : true, start : 75, end :100 },

        ];

    }

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeColor-1602280233.zip

Regards,

Durga Gopalakrishnan.

[Swetha Babu]

Fracelink,

Please use the above mentioned solution to resolve the reported scenario until we include the fix for the  reported scenario in our weekly patch release which is expected to be rolled out on April 4, 2023.

Kindly, revert us if you have any concerns.

[Durga Gopalakrishnan]

Francelink,

We are glad to announce that our v21.1.38 patch release is rolled out; we have added the fix for reported issue and is available for download under the following link.

Npm Packages : https://www.npmjs.com/~syncfusionorg

@(Html.EJS().ProgressBar("container")

.IsGradient(true)

.RangeColors(rc => {

    rc.Color("red").Start(0).End(25).Add();

    rc.Color("blue").Start(25).End(75).Add();

    rc.Color("green").Start(75).End(100).Add();

})

.Render())

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/RngeClr831042060.zip

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.