javascript - 具有固定最小值的 jQuery UI 滑块：显示最小范围，而不是最小绝对值？

Question

如文档中所述，我正在使用固定最小值为 20 的 jQuery 滑块。

但是，这并不是我所需要的。我希望滑块的可视范围为 0-100，但绝不应允许用户将滑块移动到小于 20。

换句话说，滑块的手柄不应该一直到滑块的左侧（就像现在一样），而应该显示范围 0-20。

这是一个 JSFiddle 来说明我的意思，这是当前代码：

$("#range-slider").slider({
    range: "min",
    min: 20,
    max: 100, 
    value: 20,
    step: 20,
});

有任何想法吗？

Answer 1

您应该使用幻灯片功能并强制执行

$(document).ready(function() {

    // I want the visual range to be 0-100, 
    // but the minimum allowed value to be 20 - 
    // so in other words, the handle never gets
    // all the way to the LHS of the slider, 
    // but shows the range 0-20. 
    // Is this possible? 
    $("#range-slider").slider({
        range: "min",
        min: 0,
        max: 100,
        value: 20,
        step: 20,
        slide: function(event, ui) {
            if (ui.value < 20) {
                return false;
            }
        }
    });

});

http://jsfiddle.net/nicolapeluchetti/kGtsN/17/

从文档

滑动

在滑动期间每次鼠标移动都会触发此事件。使用 ui.value（单柄滑块）获取当前句柄的值，$(..).slider('value', index) 获取另一个句柄的值。

根据 ui.value 返回 false 以防止滑动。