Round range slider with text and different color

Question

I want to make a round slider with 4 different colors, basically, the round slider should be four-part, each part represents 25% with different colors, when someone triggers 25% then slider color should be changed and its value in the text should be changed too, like if the first part background color is red then its text is name1, the second part background color should be green and its text is name2 and third and fourth part should also have different colors and text.

For reference, please see the image, I want to implement the same functionality like in attached image, can you please help, how I can develop it?

Answer 1

Instead of developing your own plugin, if you are comfortable to use the roundSlider plugin then I made a demo for your requirement.

Since writing the custom logic involves more code and check points to consider.

Check the below demo, still you can do a lot of more customization.

DEMO

Screenshot: