Question

Have this self-made slider: http://jsfiddle.net/wyc3P/4/
What it does: takes min and max values in seconds and converts them to a minute:second format during slide.

Goal is to set maximum value between handles to be exactly 40 seconds.

I thought it worked fine, until I moved right handle to match 1:00 – 1:40, but it showed 1:00 – 1:41 instead. However if you then move left handle all the way to the left, it shows correctly 0:00 – 0:40.

Please help to resolve coding mistakes. =)

Answer 1

The sliders are actually staying 40 apart (maximum), the problem is your minute/second calculations underneath use the original ui values passed in to the function, even if you set a new value:

slide: function(event, ui) {
    if ((ui.values[1]-ui.values[0]) > 40) {
        var index = $(ui.handle).index();
        if (index === 1) {
            // You're setting a new slider position here, but ui.values[1] still contains the old position
            $('#slider').slider('values', 1, ui.values[0]+40);
        } else if (index === 2) {
            $('#slider').slider('values', 0, ui.values[1]-40);
        }
    }

    // your calculations use the original ui values
}

You would need to update the ui.values too:

    if ((ui.values[1]-ui.values[0]) > 40) {
        var index = $(ui.handle).index();
        if (index === 1) {
            ui.values[1] = ui.values[0] + 40;
            $('#slider').slider('values', 1, ui.values[1]);
        } else if (index === 2) {
            ui.values[0] = ui.values[1] - 40;
            $('#slider').slider('values', 0, ui.values[0]);
        }
    }

http://jsfiddle.net/wyc3P/8/