Question

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

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

Answer 1

如果您使用jQuery UI slider，则依靠幻灯片事件可以让一个滑块镜像另一个滑块。

由于您在问题中提出了两个问题，让我们处理第一个问题（滑块相互镜像）。

首先，创建两个滑块，如下所示。

$("#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值以更改条形之间的差异。我还包括当前值的显示，以便您可以看到这确实有效。您可以在this jsFiddle example看到此示例。希望这会帮助你。

链接多个Jquery滑块

1 个答案: