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

jQuery UI Slider with fixed minimum: show minimum range, not minimum absolute value?

本文关键字：最小范围 绝对值 显示 最小值 滑块 UI jQuery      更新时间：2023-11-06

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

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

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

这里有一个JSFiddle来展示我的意思，这是当前的代码：

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

有什么想法吗？

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

$(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）以获取另一个句柄的值。

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

相关文章：