javascript - 步骤在 noUISlider 中不起作用

Question

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

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

2. 我无法使用键盘输入!我可以让它与静态代码(例如:静态 div、值等)一起使用，但不能与此动态代码一起使用。另外，键盘输入还存在两个问题。

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

有什么建议吗？

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()您的keydown的值(value)处理程序。实际上，它返回除以 1000 的值。要更正此问题，请在调用 .get() 之后，然后您需要在加/减 5(或任何步长值)之前将该值重新乘以 1000。

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

一些用户体验增强

• 您可以通过点击 slider 旁边的标签来激活 slider ，然后使用键盘移动 slider 。
• 使用 slider 步长为 5 的键盘会非常缓慢地移动 slider 。因此，我添加了加速器计算，按键保持按下的时间越长， slider 的速度就越快，释放时重置。这使得键盘具有完整的粒度，而不会变得非常慢。

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>