javascript jquery 范围滑块：将滑块 1 的最大值设置为滑块 2 的最小值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8563640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery range slider: set max of slider 1 to min of slider 2
提问by Adunahay
I have a page with 4 jQuery sliders that sent ranges. I want the sliders to update each other in the following way: the value selected for the max of slider #1 automatically becomes the min for slider #2, the max of slider #2 automatically becomes the min for slider #3 and so on. here is what i have so far:
我有一个带有 4 个发送范围的 jQuery 滑块的页面。我希望滑块以下列方式相互更新：为滑块 #1 的最大值选择的值自动变为滑块 #2 的最小值，滑块 #2 的最大值自动变为滑块 #3 的最小值，依此类推。这是我到目前为止所拥有的：
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low" ).val(ui.values[ 1 ].toFixed(2) - .01 );
var high1 = ui.values[ 1 ];
}
});
$( "#slider-range2" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount2" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high2" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low2" ).val(ui.values[ 1 ].toFixed(2) - .01 );
}
});
$( "#slider-range3" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount3" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high3" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low3" ).val(ui.values[ 1 ].toFixed(2) - .01 );
}
});
$( "#slider-range4" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount4" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high4" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low4" ).val(ui.values[ 1 ].toFixed(2) - .01 );
}
});
});
I would also like to lock the min value of slider 1 to 0.
我还想将滑块 1 的最小值锁定为 0。
I guess another question is if this is even the best way to do this?
我想另一个问题是这是否是最好的方法？
采纳答案by SadullahCeran
Here is working fiddle:
这是工作小提琴：
A couple of useful tips:
几个有用的提示：
- If you want to fix minimum of a range slider of jQuery UI, mark its "range" attribute as "min".
- 如果要修复 jQuery UI 的范围滑块的最小值，请将其“范围”属性标记为“分钟”。
$( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 100 });
$( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 100 });
- stop event is fired whenever user stops sliding
- You can change value of a slider by "option" and "values" parameters
- 每当用户停止滑动时都会触发 stop 事件
- 您可以通过“选项”和“值”参数更改滑块的值
//getter var value = $( ".selector" ).slider( "option", "value" ); //setter $( ".selector" ).slider( "option", "value", 37 );
//getter var value = $( ".selector" ).slider( "option", "value" ); //setter $( ".selector" ).slider( "option", "value", 37 );
- You can change minimum of a slider by "min" parameter
- 您可以通过“min”参数更改滑块的最小值
//getter var min = $( ".selector" ).slider( "option", "min" ); //setter $( ".selector" ).slider( "option", "min", -7 );
//getter var min = $( ".selector" ).slider( "option", "min" ); //setter $( ".selector" ).slider( "option", "min", -7 );
P.S: I only fixed action of first slider, not to duplicate myself. The rest is copy - paste.
PS：我只修复了第一个滑块的动作，而不是复制自己。剩下的就是复制粘贴。
