为什么我的 noUiSlider 只尊重滑块一半的 "step" 值？

Question

我正在尝试创建一个 noUiSlider，它具有一系列值、滑块上的刻度并以设定的步长值移动。

使用点子文档页面上的 example，我能够将其设置为显示范围从 -500 到 20,000 的滑块。

然而，step 仅适用于定义的 50% 标记（不是数学上的 50% 标记）。右边的所有内容（在本例中为 5000 到 20,000）都不会按步骤增加。相反，它会按分数增加。

var slider = document.getElementById('slider');
var low = document.getElementById('low');
var high = document.getElementById('high');
var range_all_sliders = {
  'min': [-500],
  '50%': [5000],
  'max': [20000]
};

noUiSlider.create(slider, {
  start: [-500, 20000],
  step: 500,
  connect: true,
  range: range_all_sliders,
  pips: {
    mode: 'range',
    density: 8
  }
});

slider.noUiSlider.on('update', function(values, handle) {
  low.value = values[0];
  high.value = values[1];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js"></script>

<div id="slider"></div>
<br/>
<br/>
<input type="text" id="low" placeholder="Min" value="Min" />
<input type="text" id="high" placeholder="Max" value="Max" />

滑动两个手柄。低端（从-500开始）将增加500，直到达到5000，然后忽略500的步长值到20,000。如果从高端开始，不考虑步长值，一直递减，直到5000，再递减500，直到-500。

如何使 step 值在整个滑块上有效？

Answer 1

发生这种情况是因为您使用的是非线性滑块。您提供的 step 选项是 range 选项中符号的 shorthand。它以这种方式工作，因为单个步长值可能不适合每个指定的子范围。

您需要为范围的每个部分提供步骤：

var range_all_sliders = {
    'min': [ -500, 500], // Step for this range is 500
    '50%': [ 5000, 500], // For this one too
    'max': [ 20000 ]     // n/a
};

查看 the full documentation 了解更多详情。

为什么我的 noUiSlider 只尊重滑块一半的 "step" 值？

Why does my noUiSlider only respect the "step" value on half of the slider?

jquery

nouislider