Support for multiple ranges in same slider

[soundar24]

Need to provide multiple range support in a single slider, and each range should be work independent. Check the below screenshot for reference:

Note: with the current version its difficult to achieve this. In the SVG version we can easily add multiple ranges.

Requested from here: http://roundsliderui.com/#comment-3128662149

[CryptoZorro]

Just checking, if there was any progress on this feature request... I want to use four handles to divide a circle into four portions... wonder if this is possible with the current version.

The default portions would be 25% each.. and the user will use the four handles to re-size each portion on the same slider.. Thanks in advance.

This is close to what I had in mind, just replace the slices with percentages.

https://www.taoeffect.com/blog/wp-content/uploads/2010/06/PerfectTestMachine.png

[soundar24]

@CryptoZorro I suspect you are expecting the multiple handles support like the below ticket (#44). Can you check the below demos and confirm:
Demo 1: http://jsfiddle.net/soundar24/utqgufx0/6/
Demo 2: https://jsfiddle.net/soundar24/69np4Lcn/

Also if you want the partition kind of scenario then, recently I have provided the similar demo (ref). Can you check the below:

https://jsfiddle.net/soundar24/b2zt7yvf/

I believe the combination of both demos might be your requirement, can you please check and update me your comments.

[CryptoZorro]

@soundar24 Thank you very very much.. Yours is an amazing and unique plugin...

Had some hiccups, but managed to refer to the jsfiddle samples, and worked it out...

Here is the modified version: https://jsfiddle.net/akayy/x0z7fwk3

Again, thanks a ton for your help :-)

[soundar24]

@CryptoZorro great, you perfectly combined the samples.. here the only problem I can see is, the handles can crossed each other. but I believe for this scenario it shouldn't.

So I just updated the sample to restrict the handles with the adjacent handles, you can check this demo:

https://jsfiddle.net/soundar24/19snfxy8/

Also you can replace with any pie chart which fulfils your requirement. Cheers 👍

[CryptoZorro]

@soundar24 Thanks a ton, that was a big bonus... It's just perfect now :-) Hoorayyy

[CryptoZorro]

Hi @soundar24 ,

Just one last hurdle. As the pie is dynamically generated with different slice counts, I'm trying to re-initialise the whole thing on a button click.

It works the first time, but when I click the button a second time (without touching the handles), something weird is happening.. I know I'm missing something w.r.t the destroy function, but spent hours and didn't really crack it..

In this jsfiddle snippet, I have thrown all the previous code into a button click - https://jsfiddle.net/akayy/fk6y1gh9/

Are you able to help here? Thanks again!

[soundar24]

@CryptoZorro yes you need to destroy the slider also, otherwise the slider keeps the same value and it won't trigger the valueChange event in the second time (since nothing was changed). So the chart won't re-plot properly.

Here I have updated the demo where it works fine:

https://jsfiddle.net/soundar24/ryjca8gf/

[CryptoZorro]

Awesome.. Yes, I think this is what I missed, so I can destroy this object when reinitializing.. Thanks a bunch bro!

sliderObj = $("#slider1").data("roundSlider");