我正在处理这样的情况:我有两个从这里获取的 jQuery slider 控件: http://jqueryui.com/demos/slider/#rangemin
我需要根据另一个的值来限制一个，这样它们就不会重叠。我想出了下面的代码。它起作用了，除了一个非常烦人的问题 - 当我拖动 slider 时，当我仍在拖动它们时，它们会相互经过，只有在我释放鼠标按钮时才会恢复到受限值。
纯粹是偶然，我找到了添加 ui.someunknownmethod('1'); 的解决方案。下面一行。
所以我的问题是，我可以保留这条线而不引起任何问题吗？
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
#slider1 .ui-slider-range { background: #8ae234; }
#slider2 .ui-slider-range { background: #729fcf; }
#sliderContainer{
width: 400px;
margin: 6px 0px;
}
</style>
</head>
<body>
<!-- Slider -->
<div id="sliderContainer">
<div id="slider1"></div>
</div>
<div id="sliderContainer">
<div id="slider2"></div>
</div>
<span id="txt">-</span>
<span id="txt2">-</span>
<script>
$(function(){
$("#slider1").slider({
orientation: "horizontal",
range: "max",
max: 255,
value: 50,
slide: refresh1,
change: refresh1
});
$("#slider2").slider({
orientation: "horizontal",
range: "max",
max: 255,
value: 30,
slide: refresh2,
change: refresh2
});
});
function refresh1(e, ui)
{
var slider2 = $("#slider2");
var v1 = ui.value;
var v2 = slider2.slider('value');
if(v1 < v2)
{
$("#slider1").slider('value', v2);
//This is the line that "saves the day"
ui.someunknownmethod('1');
}
$("#txt").text(v1);
}
function refresh2(e, ui)
{
var slider1 = $("#slider1");
var v1 = slider1.slider('value');
var v2 = ui.value;
if(v2 > v1)
{
$("#slider2").slider('value', v1);
//This is the line that "saves the day"
ui.someunknownmethod('1');
}
$("#txt2").text(v2);
}
</script>
</body>
编辑:不要使用抛出未处理异常的方法——当然，它适用于大多数浏览器，但旧版 IE 除外，在旧版 IE 中，浏览器会弹出一个消息框遇到的每个错误。这对于用户来说会很烦人!
到目前为止，我无法找到我要找的东西(除了重写 slider UI 代码之外)，所以如果有人找到它，请在此处发布...
最佳答案
你可以做类似的事情
$("#slider2").slider("option", "min", 25);
或
$("#slider2").slider("option", "max", 25);
参见http://jqueryui.com/demos/slider/#methods了解更多信息/方法
关于jquery - 将 jQuery slider 限制为另一个 slider 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8255435/