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/