Question

我有一个滑块，范围从0到80.我想添加一个最小范围，因此用户不能低于此滑块。例如，我想设置一个像20这样的值，用户不能低于此值，但滑块的范围仍然是0到80.

这是我的滑块脚本：

 $("#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);
    }
});

如果可以，请详细说明。

Answer 1

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

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

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

This可能有用。

Answer 2

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

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

Answer 3

我发现当一个人试图滑过20时，下面的滑动方法会将较低的值固定为20，而不是保留之前的值（某个数字略高于20）。

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

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

3 个答案: