具有固定最小值的jQuery UI滑动条:显示最小范围，而不是最小绝对值?

I'm using a jQuery slider with a fixed minimum of 20, as described in the docs.

我使用的是jQuery滑动条，最小值为20，如文档中所描述的。

However, it's not quite what I need. I'd like the visual range of the slider to be 0-100, but the user should never be allowed to move the slider to less than 20.

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

In other words, the handle of the slider should never go all the way to the left-hand side of the slider (as it does at the moment), but should show the range 0-20.

换句话说，滑块的手柄不应该一直放在滑块的左手边(就像它现在所做的那样)，而是应该显示0-20的范围。

Here is a JSFiddle to show what I mean, and here is the current code:

这里有一个JSFiddle可以显示我的意思，这里是当前的代码:

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

Any ideas?

什么好主意吗?

1 个解决方案

#1

You should use the slide function and enforce that

您应该使用幻灯片函数并执行它

$(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/

From the docs

从文档

Slide

幻灯片

This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.

此事件在滑鼠每次移动时触发。使用ui。值(单柄滑块)以获取当前句柄的值，$(..)。滑块('value'， index)获取另一个句柄的值。

Return false in order to prevent a slide, based on ui.value.

返回false以防止滑动，基于ui.value。

#1