Question

我使用的jQuery滑块的最小值固定为20，为described in the docs。

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

换句话说，滑块的手柄永远不会一直到滑块的左侧（就像此刻一样），但是应该显示0-20的范围。

以下是a JSFiddle to show what I mean，这是当前代码：

$("#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（＆＃39; value＆＃39;，index）获取另一个句柄＆＃39;值。

根据ui.value返回false以防止幻灯片。

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

1 个答案: