Edit in JSFiddle

$(document).ready(function() {
    $("#dvSliderRange1").slider({
        range: true,
        min: 0,
        max: 100,
        values: [20, 40],
        step: 10,
        slide: function(event, ui) {
            $("#lblRange1").text(ui.values[0] + " - " + ui.values[1]);
        }
    });

    $("#dvSliderRange2").slider({
        range: true,
        min: 0,
        max: 100,
        values: [20, 40],
        step: 10,
        slide: function(event, ui) {
            if (ui.values[0] == ui.values[1]) {
                return false;
            }
            $("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);
        }
    });
});

Overlap Range : <label id="lblRange1"></label> <br/><br/>
<div id="dvSliderRange1"></div>
<br/>
No Overlap Range : <label id="lblRange2"></label> <br/><br/>
<div id="dvSliderRange2"></div>