2011-04-04 212 views
0

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

即。如果我有一个范围的滑块,我想获取最终值并将其用作另一个范围滑块的起始值。我也希望它们在变化时一起动画,因此它们看起来像是链接在一起

+0

顺便说一句,如果你接受了帮助过你的人的答案(假设你收到了很好的答案),你可能会发现你会得到更快的答案。如果是最终帮助你的答案,请检查答案下面的绿色复选标记(在分数下面)。谢谢! – JasCav 2011-04-04 22:24:39

回答

5

如果您使用的是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看到这个例子。希望这可以帮助你。