jquery-ui - jquery 滑块步长在 10 秒内递增，但最小值为 1

Question

我有一个问题，我希望步骤从 1 到最大 1000 递增 10。

问题是，如果值为 1，则下一个值为 11，然后是 21 等。如何更改它以使其从 1、10、20、30 等开始，所以第一步是 9，然后是 10。

有时值也可以到1001，我想如果你快速滑到最大值，它会停在1000，但是如果你停在991，如果你走最后一步，它会超过1000。

<p>
    <label for="amount">Maximum price:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-min"></div>

$("#slider-range-min").slider({
    range: "min",
    value: 1000,
    min: 1,
    step: 10,
    max: 1000,
    slide: function (event, ui) {
        $("#amount").val("$" + ui.value);
    }
});
$("#amount").val("$" + $("#slider-range-min").slider("value"));

http://jsfiddle.net/zwTnY/

Answer 1

将范围从 1-1000 更改为 0-1000 并在滑动或停止时添加检查以查看值是否为零。如果是这样，请将其更改为 1。

jsFiddle 示例

$("#slider-range-min").slider({
    range: "min",
    value: 500,
    min: 0,
    step: 10,
    max: 1000,
    slide: function (event, ui) {
        $("#amount").val("$" + ui.value);
        if (ui.value == 0) {
            $("#slider-range-min").slider('value', 1);
            $("#amount").val('$1');
        }
    },
    stop: function (event, ui) {
        if (ui.value == 0) {
            $("#slider-range-min").slider('value', 1);
            $("#amount").val('$1');
        }
    }
});
$("#amount").val("$" + $("#slider-range-min").slider("value"));