jQuery UI slider - prevent multiple handles from overlapping

Question

I have this fiddle of a slider with four handles. What would be the simplest way to disallow them from crossing each other when you drag them? I tried comparing their position.left values and returning false when they equal an adjacent handle, but that kills the dragging altogether. Ideally, you wouldn't be able to drag it smaller than the width of the select dropdown in between each handle, but I can probably get there if I could just stop them from crossing.

http://jsfiddle.net/0jqs0eeh/7/

$(".pct-slider").slider({
    min: 0,
    max: 1440,
    step: 15,
    range: false,
    values: [180, 435, 1080, 1320],
    create: function (event, ui) {
        $.each( initialValues, function(i, v){
            updateValue({
                value: v,
                handle: $('.ui-slider-handle').eq(i) 
            });
        });
    },
    slide: function (event, ui) {
        var handleIndex = $(ui.handle).index();
        updateValue(ui);
        positionSelects();
    }
});

Answer 1

You can access the handle's index using the selector $('a', event.target).index(ui.handle).

From there, you can access the next/previous handle values and compare whether the current handle's value is in between them. If it is, then return false and prevent the handles from overlapping.

In the example below, the value 25 is hardcoded padding that is used to prevent the handles from overlapping.

Updated Example

slide: function (event, ui) {
    var handleIndex = $('a', event.target).index(ui.handle),
        curr = ui.values[handleIndex],
        next = ui.values[handleIndex + 1] - 25,
        prev = ui.values[handleIndex - 1] + 25;

    if (curr > next || curr < prev) {
        return false;
    }

    updateValue(ui);
    positionSelects();
}