如何更改一个Jquery滑块的值以镜像另一个滑块的值。链接多个Jquery滑块
即。如果我有一个范围的滑块,我想获取最终值并将其用作另一个范围滑块的起始值。我也希望它们在变化时一起动画,因此它们看起来像是链接在一起
如何更改一个Jquery滑块的值以镜像另一个滑块的值。链接多个Jquery滑块
即。如果我有一个范围的滑块,我想获取最终值并将其用作另一个范围滑块的起始值。我也希望它们在变化时一起动画,因此它们看起来像是链接在一起
如果您使用的是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"));
您可以更改差异值以更改条形之间的差异。我还包含了当前值的显示,以便您可以看到这确实有效。你可以在this jsFiddle example看到这个例子。希望这可以帮助你。
顺便说一句,如果你接受了帮助过你的人的答案(假设你收到了很好的答案),你可能会发现你会得到更快的答案。如果是最终帮助你的答案,请检查答案下面的绿色复选标记(在分数下面)。谢谢! – JasCav 2011-04-04 22:24:39