我有一个小需求。。请有人帮我
我有这样的代码来使用JQueryUISlider制作一个带有两个旋钮的滑块,但我希望两者都有自己的范围
例如,如果总范围为1-100,则第一个旋钮应仅在1-50之间滑动,第二个旋钮应在51-100之间滑动。
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 1,
max: 100,
values: [ 1, 100 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
您可以这样做:
$("#slider-range").slider({
range: true,
min: 1,
max: 100,
values: [1, 100],
slide: function(event, ui) {
// Make sure first handle doesn't go over 50
if ( ui.value == ui.values[0] && ui.value > 50 ) {
return false;
}
// Make sure second handle doesn't go below 51
if ( ui.value == ui.values[1] && ui.value < 51 ) {
return false;
}
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
示例:http://jsfiddle.net/petersendidit/kbHbc/1/
jQuery UI滑块扩展-未来参考
我已经为现有的jQueryUI滑块小部件编写了一个扩展,它(也)满足了您的需求。由于代码是维护的,我不会把它粘贴在这里,因为你总是可以在我的博客上获得最新版本。
它支持
- 允许的最小和最大范围大小
- 下限边界最大值-这正是您所需要的
- 上限边界最小值-这个也是
- 自动范围滑动-当一个手柄达到最大范围大小时,它会拖动另一个手柄,使范围大小保持在最大值