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选项中表示法的简写。它以这种方式工作，因为单个步骤值可能不适合每个指定的子范围。

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

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只尊重滑块一半的“步”值？

1 个答案: