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

希望这会有所帮助。