jQuery Ui slider - limit the range

Question

Using jQuery UI, I want to use 2 individual sliders, both of which have a range of 0 to 100 (not a single slider with 2 handles).

When the first slider is moved to say '40', I want a limit to be placed on the sliders so that the second one can only be moved to a maximum of '60', i.e. it can't be moved past 60 - i.e. there is a total limit across the two sliders of 100.

Is this possible?

Answer 1

You can trap the slide event and cancel it (return false) if the total value of your sliders would exceed 100:

$('.slider').slider({
    min: 0,
    max: 100,
    slide: function (ev, ui) {
        var total = ui.value;
        $('.slider').not(this).each(function () {
            total += $(this).slider('value');
        })
        if (total > 100) {
            return false;
        }
        $('#total').text(total);
    }
});

demo at http://jsfiddle.net/alnitak/zFYjW/4/