スライダーをこのように作成しますか？

これが何であるかわからないので、私はそれを検索できませんが、http://vps.net/product/cloud-servers/に行き、VPSノードまでスクロールすると、どのように作成されますか？チュートリアルや何か私は見てみることができますか？これはどんなスライダーですか？スライダーをこのように作成しますか？

ありがとうございます！

出典

2012-04-11 Joe Bobby

を見て：//jqueryui.com/demos/slider/#steps –

あなたはjQueryのUIのスライダーでこれを行うことができます。http://jqueryui.com/demos/slider/

出典

2012-04-11 22:15:54

私はこれで正確に同じスライダーを作成することができますか？私はそれが一度に複数のフィールドを変更し、あなたがリンクしたスライダーを使ってその例を見ていないことに気がつきました。単にそれが動作することを確認したいだけです –

はい。明らかに、彼らはそれをカスタマイズするいくつかの作業を行ってきましたが、あなたがソースコードを見れば、それは彼らが使っているものです。 –

彼らは少しノードボックスをハイライトし、カスタマイズコールバックで、jQueryの-UIのスライダーを使用している：

$('#slider').slider({ 
    range: "max", 
    min: 1, 
    max: 15, 
    step: 1, 
    slide: function(event, ui) { 
     // Un-highlight nodes 
     $('.node').removeClass('highlight'); 
     // Highlight all nodes up to value selected 
     $('.node:lt('+ui.value+')').addClass("highlight"); 
    } 
});

これは私の例でありますコードでは、難読化されたコードを解析して、コールバックのために実際に行っていたことを確認したくありませんでした。これはおそらくこれに非常に似ています。

デモ：http://jsfiddle.net/jtbowden/A8ccw/1/

あなたは端数値にstep値を変更した場合.01のように、ステップの挙動を取り除き、その後、あなたのハイライトのインデックスを決定するためにMath.floor()を使用して得ることができます。

デモ：ここhttp://jsfiddle.net/jtbowden/A8ccw/4/

は、複数のデータフィールドを更新デモです：

デモます：http：http://jsfiddle.net/jtbowden/A8ccw/8/

出典

2012-04-11 22:25:24

すてきなことに、Jeff B. – Marc

はまた、jQueryのUIのスライダーは、その基本的な機能を持っていhttp://egorkhmelev.github.com/jslider/

出典

2012-04-11 22:44:33 Stian