链接多个Jquery滑块

Question

如何更改一个Jquery滑块的值以镜像另一个滑块的值.

即.如果我有一个带范围的滑块,我想取结束值并将其用作另一个范围滑块的起始值.我也希望他们在变化中一起动画,所以他们看起来像是在一起

Answer 1

如果您使用的是jQuery UI滑块,则可以依靠滑动事件让一个滑块镜像另一个滑块.

既然您在问题中提出了两个问题,那就让我们处理第一个问题(滑块相互镜像).

首先,创建两个滑块,就像这样.

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

当然,添加适当的HTML.

<div id="slider1" style="width:100px"></div>
<div id="slider2" style="width:100px"></div>

这将设置您的滑块.现在,您必须实现幻灯片事件,以便在更新滑块时更新OTHER滑块.现在就是这样做的.

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider2').slider("option", "value", ui.value);
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider1').slider("option", "value", ui.value);
    }
});

请注意幻灯片功能内部的工作.

至于问题的第二部分(取最终值并将其用作另一个滑块的起始值),您需要在最小值和最大值中设置它(在第一个滑块的末尾开始第二个开始)最大值).然后,您必须进行的唯一其他更改是将值的差异添加到幻灯片功能中的ui.value.以下是您需要的JavaScript示例.

var diff = 100;
$("#slider1").slider({
    min: diff - diff,
    max: diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value);
        $("#amount2").val(ui.value + diff);
        $('#slider2').slider("option", "value", ui.value + diff);
    }
});
$("#amount1").val($("#slider1").slider("value"));

$("#slider2").slider({
    min: diff,
    max: diff + diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value - diff);
        $("#amount2").val(ui.value);
        $('#slider1').slider("option", "value", ui.value - diff);
    }
});
$("#amount2").val($("#slider2").slider("value"));

您可以更改diff值以更改条形之间的差异.我还包括当前值的显示,以便您可以看到这确实有效.你可以在这个jsFiddle示例中看到这个例子.希望这可以帮助你.