我使用的是一个固定最小值为20的jQuery滑块,如文档中所述。
然而,这并不是我所需要的。我希望滑块的视觉范围为0-100,但不应允许用户将滑块移动到小于20。
换句话说,滑块的手柄永远不应该一直到滑块的左侧(就像现在一样),而是应该显示0-20的范围。
这里有一个JSFiddle来展示我的意思,这是当前的代码:
$("#range-slider").slider({
range: "min",
min: 20,
max: 100,
value: 20,
step: 20,
});
有什么想法吗?
您应该使用幻灯片功能并强制执行
$(document).ready(function() {
// I want the visual range to be 0-100,
// but the minimum allowed value to be 20 -
// so in other words, the handle never gets
// all the way to the LHS of the slider,
// but shows the range 0-20.
// Is this possible?
$("#range-slider").slider({
range: "min",
min: 0,
max: 100,
value: 20,
step: 20,
slide: function(event, ui) {
if (ui.value < 20) {
return false;
}
}
});
});
http://jsfiddle.net/nicolapeluchetti/kGtsN/17/
从文档
幻灯片
此事件是在滑动过程中每次鼠标移动时触发的。使用ui.value(单柄滑块)以获得当前句柄的值,$(..).slider('value',index)以获取另一个句柄的值。
返回false以防止滑动,基于ui.value.