noUiSliderは、スライダの半分の「ステップ」値だけを尊重するのはなぜですか？

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から開始）は、5000に達するまで500だけ増加し、次に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を見てください。