设置jQuery UI滑块的最小值限制

我有一个范围从0到80的滑块。我想添加一个最小范围，所以用户不能滑动到低于此值。比如我想设置像20的数值，并且用户无法滑块比这个低，但滑块的范围仍然是从0到80设置jQuery UI滑块的最小值限制

这里是我的滑块脚本：

$("#showslider").keyup(function (e){ 
$(".slider").slider("value", $("#showslider").val()); 
$("#slider-result").html($("#showslider").val()); 
$(".slider").slider({ 
animate: true, 
    range: "min", 
    value: 50, 
    min: 0, 
max: 80, 
step: 1, 
slide: function (event, ui) { 
$("#slider-result").html(ui.value); 
    $("#showslider").val(ui.value); 
}, 
change: function(event, ui) { 
    $('#hidden').attr('value', ui.value); 
    } 
});

如果你能请详细指导我。

来源

2012-06-06 Siwa

你能否详细说明当不允许任何“<20”的情况下，滑块的值在'0 - 80'范围内？ – pimvdb

这是用户级别，所以他们可以升级他们的级别，但不能降级。我希望他们看到所有可用的级别。 – Siwa

在slide函数中，您可以检查滑块的值以查看它是否在您想要的范围内。

if (ui.value < 20) // corrected 
    return false;

这是为了保持最小值为0，但现在允许值低于20，这正是我认为Siwa所要求的值。如果您只想制作至少20个，请将min: 0更改为min: 20。

This可能会有用。

来源

2012-06-06 15:14:33 sachleen

将代码中的max属性更改为20. Example。

但是，如果要显示整个100个值并允许用户仅在0到20之间滑动，则应该绑定到change事件您的方法，一旦用户尝试忽略它，whick会将滑动位置返回到允许的位置。 Doc page。

来源

2012-06-06 15:11:51

我发现下面的幻灯片方法会在您尝试滑动过20时将较低值固定为20，而不是保留以前的值（某些数字略高于20）。

slide: function (event, ui) { 
    if (ui.value < 20) { 
    $(this).slider('value',20); 
    return false; 
    } 
},

来源

2015-08-01 19:15:17

设置jQuery UI滑块的最小值限制

回答

相关问题