Почему мой noUiSlider учитывает значение "step" только на половине слайдера?

Question

Я пытаюсь создать noUiSlider, который имеет диапазон значений, шкалу на ползунке и перемещается с заданным значением шага.

Используя пример на странице документации для пипсов, я смог настроить его так, чтобы показывал слайдер с диапазоном от -500 до 20000.

step однако, работает только до определенной отметки 50% (не математической отметки 50%). Все справа от этого (в данном случае от 5000 до 20000) не увеличивается ни на шаг. Вместо этого он увеличивается на доли.

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 до 20000. Если вы начнете с верхнего уровня, он будет уменьшаться без учета значения шага, пока не достигнет 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
};

Посмотрите полную документацию для более подробной информации.