JQuery UI Slider with Multiple handles: How to stop the handles from crossing ?

Question

Hi,

I'm developing a quick solution that uses a Slider with multiple handles to define widths for a dynamic layout.

I've attempted to use both ExtJS3 and the latest JQuery UI.

In ExtJS, you can constrain the handles so the don't cross over each other, and it's quite an intuitive approach to the UI I need, however there are reasons why I would rather not use ExtJS for one 'island' in a sea of JQuery.

So, does anyone know of a secret attribute, or a bit of code that constrains multiple handles in the JQuery slider ?

For clarity: if you have a slider with 2 handles, one at 40 and one at 60; the constraint would stop you dragging the handle at 60 down to 20, without first moving the 40 one.

Answer 1

What code are you using for the Jquery slider? Looking at the range slider demo, it has two handles and its not possible to cross them.

Answer 2

In the slide event you can constrain the handle movement by checking the slider values and returning true to allow the slide or false to prevent it (see the jQuery UI docs for more information)