多个jQuery UI范围滑块交互

Question

我正在使用jQuery UI创建三个单独的范围滑块。但是，由于某些原因，当移动滑块上的手柄时，另一个手柄将跳转到修改的最后一个滑块上相应手柄的位置（请参阅下面的gif）。我真的想停止这一点，让滑块完全独立。

目前我只在Chrome中测试过它。

Here's a JSFiddle that demonstrates the issue。以下是相关代码：

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]);
        }
    });
}); ​

希望这有帮助。