如何解决单个滑块,两个旋钮各有其范围
| 我的要求不高。请有人帮我 我有这段代码使用JQuery UISlider制作一个带有两个旋钮的滑块,但我希望两者都有自己的范围。 例如,如果总范围是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滑块扩展-将来参考
我已经为现有的jQuery UI滑块小部件编写了扩展程序(也可以完成您的要求)。由于代码已维护,因此我不会将其粘贴在此处,因为您始终可以在我的博客上获取最新版本。
它支持什么
最小和最大允许范围大小
下限边界最大值-这就是您需要的
上限边界最小值-这个也是
自动范围滑动-当一个手柄达到最大范围大小时,它将拖动另一个手柄,以保持范围大小为最大值
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。