在 noUISlider 中不起作用的步骤

Question

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

步骤无效。它适用于“15”或更高，但低于此值，step 不起作用。如果我使用“10”，步数变为 20。如果我选择 5 作为步数（这是我需要的值）也是如此。
我无法使用键盘输入！我可以让它与静态代码（例如：static div、值等）一起工作，但不能与此动态代码一起使用。另外，键盘输入有两个问题。
- 它总是移动列表的最后一项（可能是因为 'I'，它在事件中不存在....但我不知道如何 solve/fix 它）。
- 该值始终滑动到滑块的最大值或最小值。如果我输入 -> 然后滑块移动到最大值。如果我输入 <- 然后滑块移动到最小值。

有什么建议吗？

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 影响了 keydown 处理程序中的 .get() 值。实际上它 returns 值除以 1000。要更正此问题，在调用 .get() 之后，您需要在 adding/subtracting 5（或任何步骤）之前将值 re-multiply 1000值可能是）。

我注意到的另一个问题是 keydown 事件仅绑定到 for 循环中的最后一个滑块，而不管您使用鼠标 click/slide 哪个滑块。这是因为 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>

在 noUISlider 中不起作用的步骤

Steps not working in noUISlider

javascript

jquery

nouislider