Warum beachtet mein noUiSlider nur den "step" -Wert auf der Hälfte des Sliders?

Question

Ich versuche, einen noUiSlider zu erstellen, der eine Reihe von Werten hat, eine Skalierung auf dem Schieberegler und bewegt sich mit einem festgelegten Schrittwert.

Mit der example auf ihrer Dokumentationsseite für Pips, konnte ich dies einrichten, um einen Schieberegler zu zeigen, der einen Bereich von -500 bis 20.000 hat.

Die step funktioniert jedoch nur bis zur definierten 50% -Marke (nicht die mathematische 50% -Marke). Alles rechts davon (in diesem Fall 5000 bis 20000) erhöht sich nicht um den Schritt. Stattdessen erhöht es sich um Bruchteile.

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

Schieben Sie die beiden Griffe. Das untere Ende (beginnend bei -500) wird um 500 erhöht, bis es 5000 erreicht, und dann den 500-Schritt-Wert auf 20.000 ignoriert. Wenn Sie am oberen Ende beginnen, wird es ohne Berücksichtigung des Schrittwerts bis auf 5000 sinken und dann um 500 verringert, bis es -500 erreicht.

Wie bekomme ich den step Wert über den gesamten Schieberegler gültig?

Answer 1

Dies passiert, weil Sie einen nicht linearen Schieberegler verwenden. Die von Ihnen zur Verfügung gestellte step Option ist eine Abkürzung für die Notation in der range Option. Es funktioniert auf diese Weise, weil ein einzelner Schrittwert nicht in jeden angegebenen Teilbereich passen kann.

Sie müssen den Schritt für jeden Teil des Bereichs liefern:

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

Werfen Sie einen Blick auf the full documentation für weitere Details.