jQuery 最小值/最大值从 0 到 100 的滑块限制

Question

默认jQuery滑块0到100，我只需要限制在20%到50%之间。 只有 1 个手柄（不是 2 个）

js:

$('div').slider({
    //range: 'max',
    step: 1,
    min: 20,
    max: 50,
    slide: function(event, ui){
        console.log(ui.value);
    }
});

这是我需要的图片：

Answer 1

range: false应该就是你要找的。

Answer 2

您可以在 slide 属性提供的函数中测试滑块的当前值。如果值太低或太高，只需 return false 中止进程。

var sliderMin = 20,
    sliderMax = 50;

$('#slider').slider({
    step: 1,
    min: 0,
    max: 100,
    value: sliderMin,
    slide: function( event, ui ) {
      var amount = ui.value;
      if (amount < sliderMin || amount > sliderMax) {
        return false;
      } else {
        $("#amount").val(amount);
      }
    }
});

$("#amount").val(sliderMin);

您可以在此jsFiddle.

中进行测试

jQuery 最小值/最大值从 0 到 100 的滑块限制

jQuery Slider limit with min / max from 0 to 100

jquery

jquery-ui

uislider