jレンジレンジのピッカー設定値の問題

Question

jRangeレンジピッカーの値を設定する方法が不思議です。

2つのドットがランダムな場所に固定されているように見えましたが、ドキュメントに続いて以下のコードを実行すると記載されています。

$('.range-slider').jRange({ 
    from: 0, 
    to: 36, 
    step: 0.25, 
    scale: [0, 6, 12, 6, 12, 6, 0], 
    format: '%s', 
    width: '100%', 
    showLabels: true, 
    isRange: true 
}); 
$('.range-slider').jRange('setValue', '20,26'); 

Answer 1

私はあなたが複数の繰り返しインデックススカラーを持っているあなたのscale設定の配列が正しくない、それは[0, 6, 12, 18, 24, 30, 36]代わりの[0, 6, 12, 6, 12, 6, 0]

$('.range-slider').jRange({ 
 
    from: 0, 
 
    to: 36, 
 
    step: 0.25, 
 
    scale: [0, 6, 12, 18, 24, 30, 36], 
 
    format: '%s', 
 
    width: '100%', 
 
    showLabels: true, 
 
    isRange: true 
 
}); 
 
$('.range-slider').jRange('setValue', '20,26');

<link href="http://nitinhayaran.github.io/jRange/jquery.range.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://nitinhayaran.github.io/jRange/jquery.range.js"></script> 
 
<div class="demo-output"> 
 
    <input class="range-slider" type="hidden" value="0.0" /> 
 
</div>

Answer 2

$('.range-slider').jRange('updateRange', '0,36','20,26');

あなたにも代わりにupdateRangeを使用する範囲を更新したい場合は、その範囲を変更せずに、スライダーの現在の値を設定します。

を初期化した後、（最小、最大）値と間隔を変更するには、 'updateRange'を使用します。

http://nitinhayaran.github.io/jRange/demo/ボトム近く！

Answer 3

されるべきだと思います。そして、範囲は単純に1から36までカウントされ、あなたのスケールに関係なく無視されます。 これはディスプレイの場合のみです。

しかし、これを回避する関数を書くことができます。

function getPos(i,lc) { 
 
\t return i + 12 * lc; 
 
} 
 

 
$('.range-slider').jRange({ 
 
    from: 0, 
 
    to: 36, 
 
    step: 0.25, 
 
    scale: [0, 6, 12, 6, 12, 6, 0], 
 
    format: '%s', 
 
    width: '100%', 
 
    showLabels: true, 
 
    isRange: true 
 
}); 
 
$('.range-slider').jRange('setValue', getPos(6,1) + "," + getPos(6,2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://neil.computer/stack/jquery.range.css"> 
 
<script src="http://neil.computer/stack/jquery.range-min.js"></script> 
 
<div class="range-slider"></div>