javascript - 相互作用する複数のjQueryUI範囲スライダー

Question

jQueryUIを使用して3つの個別の範囲スライダーを作成しています。ただし、何らかの理由でスライダーのハンドルを移動すると、もう一方のハンドルが最後に変更されたスライダーの対応するハンドルの位置にジャンプします（下のgifを参照）。これを止めて、スライダーを完全に独立させたいと思います。

現在、Chromeでのみテストしています。

これが問題を示すJSFiddleです。関連するコードは次のとおりです。

HTML

<ul id="sliders">
    <li id="red">
        <div class="slider"></div>
    </li>
    <li id="green">
        <div class="slider"></div>
    </li>
    <li id="blue">
        <div class="slider"></div>
    </li>
</ul>​

Javascript

$( "#sliders .slider" ).slider({
    range: true,
    orientation: "horizontal",
    min: 0,
    max: 255,
    values: [ 0, 255 ],
    slide: function( event, ui ) {
        $(this).parent().children(".range").text(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
    }
});

Answer 1

.slider()アイテムのコレクションではなく、各アイテムにウィジェットを適用する必要があります。

$( "#sliders .slider" ).each(function(){
    $(this).slider({
        range: true,
        orientation: "horizontal",
        min: 0,
        max: 255,
        values: [ 0, 255 ],
        slide: function( event, ui ) {
            $(this).prev(".range").text(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
        }
    });
});

.prev()また、代わりに使用できることに注意してください.parent().children()

Answer 2

コードに次の変更を加えてみてください。

$("#sliders .slider").each(function() {
    $(this).slider({
        range : true,
        orientation : "horizontal",
        min : 0,
        max : 255,
        values : [0, 255],
        orientation : "horizontal",
        slide : function(event, ui) {
            $(this).parent().children(".range").text(ui.values[0] + " - " + ui.values[1]);
        }
    });
}); ​

お役に立てれば。