Question

我有一个jQuery UI滑块，它以月为单位设置，但步长值为12个月。

  $( "#slider_months" ).slider({
  range: "min",
  value: 48,
  min: 12,
  max: 60,
  slide: function( event, ui ) {
   $( "#header_months" ).html( ui.value );
  },

然而，我发现如果用户向左或向右移动滑块它根本不会移动但是如果我移动它很长一段时间它会跳到下一个间隔。例如，我无法从12个月移动到14个月 - 拖动条只是没有响应。但如果我试图拖动12个月到20个月，拖动条将自动跳到最接近的24个月。

我希望滑块做什么总是移动而不是卡住＆＃39;即使你试着稍微移动一下，也会自动跳到下一步。

这是滑块的jfiddle http://jsfiddle.net/andieje/uHuD7/

这是代码

$(function() {
      $( "#slider_months" ).slider({
      range: "min",
      value: 48,
      min: 12,
      max: 60,
      step: 12,
      slide: function( event, ui ) {
       $( "#header_months" ).html( ui.value );
      },
      change: function( event, ui ) {
         $( "#header_months" ).html( ui.value );
       }
    });

Answer 1

这是因为你有step: 12,。如果设置的步长等于滑块的五分之一，它将不会以小的增量移动。（试想一下。）

如果您希望它更具响应性，则需要使用smaller steps：

$(function() {
    $( "#slider_months" ).slider({
        range: "min",
        value: 48,
        min: 12,
        max: 60,
        step: 1,
        slide: function( event, ui ) {
            $( "#header_months" ).html( ui.value );
        },
        change: function( event, ui ) {
            $( "#header_months" ).html( ui.value );
        }
    });
});

我不明白在12个月的步骤中做到这一点。你为什么不多年才这样做？这样你可以有1年的小步骤......

Answer 2

这里有一个解决方案，可让您拖动0到60之间的所有值，当您停止拖动时，它会捕捉到12的增量。对于正好在12的两个倍数之间的值（例如30），它将会舍入起来但你可以很容易地改变它。

<强> jsFiddle example

$("#slider_months").slider({
    range: "min",
    value: 48,
    min: 12,
    max: 60,
    slide: function (event, ui) {
        $("#header_months").html(ui.value);
    },
    change: function (event, ui) {
        $("#header_months").html(ui.value);
        var mod = ui.value % 12;
        if (mod != 0) {
            if (mod < 6) {
                $("#slider_months").slider({
                    value: Math.floor(ui.value / 12) * 12
                });

            } else if (mod >= 6) {
                $("#slider_months").slider({
                    value: Math.ceil(ui.value / 12) * 12
                });
            }
        }
    }
});

jquery ui滑块跳到幻灯片上的下一步

2 个答案: