jQuery移动范围滑块，最小范围

Question

在我的项目中，我需要范围滑块，它具有最小范围，意味着手柄值之间的差异不应低于某个限制。到目前为止，我已尝试过以下内容，但它无效。

在HTML

中

<div data-role="rangeslider">                              
   <input name="departureStartRange" id="departureStartRange" min="0" max="24" value="11" type="range" />                              
   <input name="departureEndRange" id="departureEndRange" min="0" max="24" value="21" type="range" />
</div>

在JS

中

var MIN_RANGE = 4;
$("#departureStartRange, #departureEndRange").on("change", function(e){ 
    var vala = parseInt($("#departureStartRange").val());
    var valb = parseInt($("#departureEndRange").val());
    var id=$(this).attr("id"),thisVal = parseInt($("#"+id).val()),newVal = (id == "departureStartRange") ? thisVal -1 : thisVal + 1;
    if((valb-vala) < MIN_RANGE){
        e.preventDefault();
        $("#"+id).val(newVal).slider('refresh');
        return false;
    }
    $(".departureRange").text($("#departureStartRange").val()+" hrs - "+$("#departureEndRange").val()+" hrs")    
})

此代码可防止滑块值更改，但拖动时手柄仍会移动。任何帮助都感激不尽。提前致谢。

Answer 1

我可以改进您的代码，但是如果您将一个拇指拖过另一个拇指，它会因某种原因忽略更改事件：

<div id="theRangeSlider" data-role="rangeslider">
    <input name="departureStartRange" id="departureStartRange" min="0" max="24" value="11" type="range" />
    <input name="departureEndRange" id="departureEndRange" min="0" max="24" value="21" type="range" />
</div>

var MIN_RANGE = 4;
$("#departureStartRange, #departureEndRange").on("change", function (e) {
    var vala = parseInt($("#departureStartRange").val());
    var valb = parseInt($("#departureEndRange").val());
    var id = $(this).prop("id");        

    if ((valb - vala) < MIN_RANGE) {
        e.preventDefault();
        var newVal = vala + MIN_RANGE;
        if (id == "departureStartRange") {
            newVal = valb - MIN_RANGE;
        }

        $(this).val(newVal);
        $("#theRangeSlider").rangeslider("refresh");
        return false;
    }
});

  

<强> DEMO

更新：要处理将一个滑块拖到另一个滑块上而忽略更改事件的异常，我们可以使用 slider stop event ：

$(document).on( "slidestop","#departureStartRange, #departureEndRange", function( event, ui ) {
    $(this).trigger("change");
} );

  

更新了 DEMO