jQuery Slider How do I lock a handle in place?

Question

I have a jQuery slider with a two handles. I'm looking to lock the first in place based on the second handle.

I've tried checking the values on the slide event and then setting the first handle back to it's lock position but it basically ignores what I set it to and continues to slide.

I have gotten it to work with the stop event but its very clunky.

I'm using a JSON object generated from the serverside to populate my sliders. This is my code for the stop event:

   $(clientID).slider({
        range: true,
        max: slider.max,
        values: [slider.minVal, slider.maxVal],
        change: afterSliderChanged,
        stop: onSliderStop
    });

    function onSliderStop(event, ui) {
    for (i in sliders.sliders) {
        var slider = sliders.sliders[i];
        var clientID = slider.cellType + "_" + slider.objectID + "_null";

        if (this.id == clientID) {
            if (ui.values[0].toString() == slider.max.toString()) {
                var values = $(this).slider('option', 'values');
                $(this).slider('option', 'values', [parseInt(slider.max - 1), parseInt(values[1])]);
            }
        }
    }

Anyone have any ideas?

Let me know if I need to elaborate.

Thanks! Daniel Brewer

Answer 1

Here is a quick and dirty example of how to lock the other handle in relation to the handle that is being dragged:

var offset = 40;
$('#slider').slider({
    range: true,
    max: 600,
    values: [40, 80],
    slide: function(e,ui){
        if (ui.value == ui.values[0]) {
            $(this).slider('values',1, ui.value+offset);
        } else {
            $(this).slider('values',0, ui.value-offset);
        }
    }
});

Should help you figure out how to do what you are wanting to do.

Working Example: http://jsfiddle.net/cBHdD/

Answer 2

Here's a slightly less quick-n-dirty version of @PetersenDidit's jsfiddle, that locks handles in relation to each other and also clamps the offset between them at the ends of the sliders, so the range can't collapse below maxOff. The key is return false, to keep jquery-ui from applying the current drag value:

var max = 600;
var maxOff = 40;

$('#slider').slider({
    range: true,
    max: max,
    values: [40, 80],
    slide: function(e,ui){
        if (ui.value == ui.values[0]) {
            $(this).slider( 'values', 1, ui.value+maxOff);
            if (ui.value >= max - maxOff) {
                $(this).slider( 'values', 0, max - maxOff);
                return false;
            }
        } else {
            $(this).slider( 'values',0, ui.value-maxOff);
            if (ui.value <= maxOff) {
                $(this).slider( 'values', 1, maxOff);
                return false;
            }
        }
    }
});

http://jsfiddle.net/tbWE5/