6

我有一个范围从 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);
    }
});

如果可以，请详细指导我。

4

3 回答 3

14

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

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

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

这可能很有用。

于 2012-06-06T15:14:33.610 回答
0

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

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

于 2012-06-06T15:11:51.470 回答
0

我发现以下滑动方法在尝试滑过 20 时将较低的值固定为 20，而不是保持之前的值（某个数字略高于 20）。

slide: function (event, ui) {
  if (ui.value < 20) { 
    $(this).slider('value',20);
    return false;
  }
},
于 2015-08-01T19:15:17.307 回答