步骤在 noUISlider 中不起作用

Question

我有代码创建动态滑块供用户选择频率（从 118.000 Mhz 到 136.975 Mhz）。此列表是动态的，因此用户可以添加或删除频率（及其滑块）。但是我有两个问题：

1. 步骤不工作。它适用于“15”或更高，但低于此值，step 不起作用。如果我使用“10”，步数变为 20。如果我选​​择 5 作为步数（这是我需要的值），则相同。

2. 我无法使键盘输入起作用！我可以使用静态代码（例如：静态 div、值等），但不能使用此动态代码。此外，键盘输入存在两个问题。

   • 它总是移动列表的最后一项（可能是因为“我”，这在事件中不存在......但我不知道如何解决/修复它）。
   • 该值始终滑动到滑块的最大值或最小值。如果我键入->，则滑块将移动到最大值。如果我输入 <- 然后滑块移动到最小值。

有什么建议吗？

var freqs = ["118000", "119550", "121725"];
for (var i = 0; i < freqs.length; i++) {

  var $last = $('#freq_table').find('tbody').append("<tr><td class='col-md-2' id='value_freq_" + i + "'>oi</td><td class='col-md-8 center slider' id='td_slider_" + i + "'><div id='slider_" + i + "'></div></td></tr>");

  var tmp = noUiSlider.create($('#slider_' + i).get(0), {
    start: freqs[i],
    step: 10,
    range: {
      'min': 118000,
      'max': 136975
    },
    format: wNumb({
      decimals: 3,
      thousand: '.'
    }),
  }).on('update', function(values, handle) {
    var id = this.target.id.slice(-1);
    $('#value_freq_' + id).html(values[handle] + ' Mhz');
    freqs[id] = values[handle];
  });
  var item = $('#slider_' + i).get(0);
  var handle = item.querySelector('.noUi-handle');

  handle.addEventListener('keydown', function(e) {

    var value = Number(item.noUiSlider.get());

    if (e.which === 37) {
      item.noUiSlider.set(value - 10);
    }

    if (e.which === 39) {
      item.noUiSlider.set(value + 10);
    }
  });

};

Answer 1

您遇到的问题是由于wNumb 选项decimals: 3 影响了.get() 处理程序中的.get() 值。实际上，它返回除以 1000 的值。要纠正这个问题，在调用 .get() 之后，您需要在加/减 5（或任何可能的步长值）之前将该值重新乘以 1000。

我注意到的另一个问题是keydown 事件仅绑定到for 循环中的最后一个滑块，无论您使用鼠标单击/滑动哪个滑块。原因是keydown 事件中item 的值始终为#slider_2（2 来自上一次循环迭代）。要解决此问题，请使用以下语句 var slider = $(this).closest('.noUi-target')[0]; 为刚刚单击的滑块分配一个变量。

一些用户体验增强

• 您可以通过单击滑块旁边的标签来激活滑块，然后使用键盘移动滑块。
• 使用滑块步长为 5 的键盘会非常缓慢地移动滑块。所以我添加了一个加速器计算，它增加了滑块速度，按键保持按下的时间越长，释放时重置。这样一来，键盘就可以拥有完整的粒度，而不会非常缓慢。

var freqs = ["118000", "119550", "121725"];
var stepSize = 5; // stepSize for the slider and arrow key increments

// Populate sliders by looping the freqs array
for (var i = 0; i < freqs.length; i++) {

  // Append label and slider to table
  var $last = $('#freq_table').find('tbody').append("<tr><td class='col-md-2' id='value_freq_" + i + "'>oi</td><td style='' class='col-md-8 center slider' id='td_slider_" + i + "'><div id='slider_" + i + "'></div></td></tr>");

  // Create the noUiSlider
  var tmp = noUiSlider.create($('#slider_' + i).get(0), {
    start: freqs[i],
    step: stepSize,
    range: {
      'min': 118000,
      'max': 136975
    },
    format: wNumb({
      decimals: 3,
      thousand: '.'
    }),
  }).on('update', function(values, handle) {
    var id = this.target.id.slice(-1);
    $('#value_freq_' + id).html(values[handle] + ' Mhz');
    freqs[id] = values[handle]; // Update the freqs array with new slider value
  });

  var item = $('#slider_' + i).get(0);
  var handle = item.querySelector('.noUi-handle');
  var keydownIteration = 1; // track iterations of keydown until keyup.  To be used for slider acceleration.

  // Add keyboard event to the slider handle
  handle.addEventListener('keydown', function(e) {
    var slider = $(this).closest('.noUi-target')[0];
    var value = Number(slider.noUiSlider.get()) * 1000;
    var multiplier = Math.floor(keydownIteration/10) + 1; // multiplier will be used to calculate slider acceleration

    if (e.which === 37) {
      slider.noUiSlider.set(Math.trunc(value - stepSize*multiplier));
    }

    if (e.which === 39) {
      slider.noUiSlider.set(Math.trunc(value + stepSize*multiplier));
    }

    keydownIteration++; // increment counter 
  });

  // Add keyboard event to the slider handle
  handle.addEventListener('keyup', function(e) {
    keydownIteration = 1; // resetting the iteration also resets accelaration
  });

};

// When clicking on the label, focus and click the slider
$('#freq_table').on('click', 'td:first-child', function () {
  $(this).closest('tr').find('.noUi-handle').focus().click();
});

#freq_table  td:nth-child(2) {
  width : 300px;
}

#freq_table  td:first-child {
  cursor : pointer;
}

#freq_table td {
  padding : 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="freq_table">
  <thead>
  </thead>
  <tfoot>
  </tfoot>
  <tbody>
  </tbody>
</table>