スライダーをリストに接続して、特定の値をマーク

Question

ユーザーが値を持つリストに接続されているスライダーをドラッグできるようにする機能を実装します。例の画像に示すように、ユーザは、それをドラッグするスライダバーに最も近い値が「アクティブ」になります -

http://staffanestberg.com/example.png

私はjQueryのUIスライダープラグインに見えたが、私はそれを理解したものからきましたそのようなリストに縛られることはできません。本当にどこから始めるべきかわからない。助言がありますか？

Answer 1

まあ、適切な最小/最大範囲と別の値リストを持つSliderを作成することができます。 Sliderのslideイベントを使用すると、ユーザーがスライダーをドラッグして、最も近い値を特定し、関連するリスト項目を強調表示するたびに値を取得できます。

このフィドルを参照してください：http://jsfiddle.net/d3zqY/1/

最初のビットは、単にli要素、およびそれらの内部値の配列のリストを取得します。次に、onslide関数が呼び出され、値が渡されます。最も近い数字を決定するための少しの数学がありますし、関連する項目にクラスを適用するjQueryのビットです。

残っているのは、この機能をスライダーまでフックすることだけです。

var s = $('#slider'); 
s.slider({ 
    min:10000, 
    max:1000000, 
    slide:function(){ 
     onslide(s.value()); 
     } 
    }); 

（BTWビューのユーザの視点から、私も自動的に調整した値と、スライダーをクリックできることを期待したい。）