jquery UI 滑块最小/最大值答案

【问题标题】：jquery UI slider min/max valuesjquery UI 滑块最小/最大值
【发布时间】：2011-04-27 09:11:55
【问题描述】：

我可以为 jquery ui 滑块和滚动显示数字时输入文本最小/最大值吗？ Here 是一个例子，最大值的左侧滑块有“无限制”，当你滚动它时，会出现数字。

【问题讨论】：

标签： jquery-ui slider max min jquery-ui-slider

【解决方案1】：

是的，我们可以设置 min-max

$("#slider").slider({
    range: "max",
    min: 0, // min value
    max: 200, // max value
    step: 0.1,
    value: 200, // default value of slider
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
});

【讨论】：

【解决方案2】：

您正在寻找范围滑块。我希望range slider demo 有所帮助。可以在初始化滑块时设置最小值和最大值。

已编辑 很抱歉误解了这个问题。如果您查看demo 的源代码，您会看到一个小脚本，当滑块值更改时会更改元素“#amount”的值

这是脚本：

slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }

您可以更改它以显示字符值。

slide: function( event, ui ) {
            if (ui.values[0] == <min_value>) {
                 $( "#amount" ).val( "Min Limit" + " - $" + ui.values[ 1 ] );
            }
        }

您可以根据自己的要求修改此脚本

注意：我没有对此进行测试。

【讨论】：

我知道我需要一种方法只为最小值和最大值放置文本值。

【解决方案3】：

首先销毁滑块，这会完全删除滑块功能。这会将元素返回到其初始化前的状态。

$("#selector").slider("destroy");

之后，您可以将新值添加到滑块，

$("#selector").slider({
range: "max",
min: 0, // min value
max: 200, // max value
step: 0.1,
value: 200, // default value of slider
slide: function(event, ui) {
    $("#amount").val(ui.value);
}

});

这行得通。

【讨论】：