javascript - 具有最小范围的 jQuery 移动范围 slider

Question

在我的项目中，我有一个范围 slider 的要求，它有一个最小范围，这意味着 handle 值之间的差异不应低于某个限制。到目前为止，我已经尝试了以下方法，但它不起作用。

在 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")    
})

此代码可防止 slider 值发生变化，但当我们拖动时 handle 仍会移动。任何帮助都感激不尽。提前致谢。

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 拖到另一个 slider 上会忽略更改事件的异常，我们可以使用 slider stop event :

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

Updated DEMO