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

Question

I am attempting to create a noUiSlider that has a range of values, a scale on the slider and moves at a set step value.

Using the example on their documentation page for pips, I was able to set this up to show a slider that has a range from -500 to 20,000.

The step, however, only works up to the defined 50% mark (not the mathematical 50% mark). Everything to the right of that (in this case 5000 to 20,000) doesn't increase by the step. Instead it increases by fractions.

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" />

Slide the two handles. The low end (starting at -500) will increase by 500 until it reaches 5000, then ignore the 500 step value to 20,000. If you start at the high end, it will decrease without regard to the step value until it reaches 5000, then decrease by 500 until it reaches -500.

How do I get the step value to be valid across the entire slider?

Answer 1

This happens because you are using a non-linear slider. The step option you've provided is a shorthand for the notation in the range option. It works this way because a single step value might not fit within every specified sub-range.

You'll need to supply the step for every part of the 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
};

Have a look at the full documentation for more details.