Search code examples
jqueryjquery-uislidercollision-detection

How to implement collision detection in JQuery UI Slider component?

I have a project where I need a slider UI, the Jquery slider seems to do the job but it seems that when I have a range slider, meaning two handles define a range:

enter image description here

I have the following problem:

I want the handles to have collision detection meaning that the handles do not touch each other, and do not overlap each other, and the values are calculated correctly, here is an exmple of what happens in the out of the box configuration.

enter image description here

I would like the slider to stop like this:

enter image description here

And the labels to read $62-$63

I know this exists, I've seen it done with the plugin, what am I missing.

Thank you

Solution

  • It is a known bug with an available patch. Also other user submissions relating to the topic.