Circular Range slider with three specific parts (React project)

Viewed 501

enter image description here

Hi, I'm working on a React project and I must create a pie-chart with two range sliders on the circle. With these two sliders you can change the coloured parts percentage as you can see on the picture. I've been searching for few days on the web but I don't find something equivalent. Is somebody know how to do that in Javascript (or with an npm package)? It would be very helpfull for me, i feel a little bit lost!! Thank you very much.

1 Answers

Based on your requirement the functionality seems the combination of both circular range slider and pie chart. I am not sure any specific component for this use case.

So I have created this using roundSlider and jqPlot plugins.

You can check the below demo for your requirement:

DEMO

Screenshot:

round slider with pie slices

For the simple demonstration I used the jQuery plugins, but I hope these can be used in the react as well. So I believe this might helps you or atleast helps to get a direction to achieve your requirement.

Related