minimum difference on jquery slider range

Question

I've seen several examples of what I am after but nothing that actually answers what I need.

I am changing the value of two elements with the ui.values of the slider. The difference between these values cannot be less than '2'.

So I used a quick formula if(x-y<2) dont change else change. But If the difference is less than '2' the slider handlers still move. Anyway to stop this?

var sstart = $("#slidestart").text()
var send = $("#slideend").text()

$('#dateSlider').slider({
    range: true,
    min: 1,
    minRange: 2,
    max: 14,
    step: 1,
    values: [ sstart, send ],
        slide: function( event, ui ) {
            if(ui.values[1] - ui.values[0] < 2){
                // do not allow change
                alert("that is naughty");
            } else {
                // allow change
                    $("#slidestart").text(ui.values[0])
                    $("#slideend").text(ui.values[1])   
            }   
        }
});

Thank you: Perfect result.

return false;

JS BIN EDIT

Answer 1

Actually, all you have to do is replace your alert with:

return false;

Answer 2

For future reference

Accepted answer is perfectly valid and should be used in your case, but I will provide an answer as well for any future reference.

I had a bit more constraints so I created an extension on top of the existing jQuery UI Slider widget. It has additional options (some of which are related to minimum and maximum slide range size).

Check out my blog post with detailed code.

All changes are related to range slider and include

• setting minimum and maximum range size
• lower range boundary maximum allowed value
• upper range boundary minimum allowed value
• automatic range sliding (when reaching maximum range size dragged handle drags the other handle along to keep max range size)