Take the 2-minute tour ×

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.

share|improve this question

4 Answers 4

up vote 3 down vote accepted

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)

share|improve this answer
Yup, that does work - Guess I was just hoping for a secret "constrain : true" parameter or something :) Actually turns out that what I really needed was just to sort the 'values' array from the slider, then crossing over didn't matter. No worries however, your answer was the most accurate, so you get the tick, thanks! –  Russ C Aug 17 '10 at 10:18

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.

share|improve this answer
I'm using the JQuery UI Slider, but I have defined multiple handles, up to 6 in total can be on the bar. I could try setting a range between each pair and not styling it though ... –  Russ C Aug 17 '10 at 8:16

As @madcapnmckay pointed out, if you have a slider with two handles and the range: true in the options the handles cannot be dragged past each other.

I was having a problem where it wasn't constraining properly but it turned out I had a string 'true' instead of a boolean true

share|improve this answer

Check this solution:

slide : function( event, ui ) {
        //Actual Handle Selected
        var handleIndex = $(ui.handle).index()-1;

        var diffA, diffB;

        //Check with right handles
        if(handleIndex > 0)
            diffA = ui.values[handleIndex] - ui.values[handleIndex-1];

        //Check with left handles
        if(handleIndex < ui.values.length-1)
            diffB = ui.values[handleIndex+1] - ui.values[handleIndex];

        if (diffA <= 0 || diffB <= 0) { /*checks for the values and compares*/
            return false;
share|improve this answer
Do you really want the index of the first handle to be -1? –  David Hobs Sep 7 '12 at 4:51

Your Answer


