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

Question

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

ありがとう！

score 3 · Accepted Answer

彼らは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： //jsfiddle.net/jtbowden/A8ccw/8/