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

Question

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

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)

Answer 2

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 3

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

Answer 4

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;
        }
   }

Answer 5

I'm a bit late to the party here, but I wanted to share my most compact-yet-readable way to do this. Technically it's pretty similar to @tototresde's answer.

slide: function (e, ui) {
  // Prevent crossing and overlapping of slider handles.
  if (ui.values[(ui.handleIndex - 1)] >= ui.value ||
      ui.values[(ui.handleIndex + 1)] <= ui.value) {
    return false;
  }
}