Question

我已经看过几个我所追求的例子，但实际上并没有解决我需要的事情。

我正在使用滑块的ui.values更改两个元素的值。这些值之间的差异不能小于'2'。

所以我使用快速公式，如果（x-y <2）不改变其他改变。但如果差异小于'2'，滑块处理程序仍会移动。无论如何要阻止这个？

var sstart = $("#slidestart").text()
var send = $("#slideend").text()

$('#dateSlider').slider({
    range: true,
    min: 1,
    minRange: 2,
    max: 14,
    step: 1,
    values: [ sstart, send ],
        slide: function( event, ui ) {
            if(ui.values[1] - ui.values[0] < 2){
                // do not allow change
                alert("that is naughty");
            } else {
                // allow change
                    $("#slidestart").text(ui.values[0])
                    $("#slideend").text(ui.values[1])   
            }   
        }
});

谢谢：完美的结果。

return false;

JS BIN EDIT

Answer 1

实际上，您所要做的就是用以下内容替换警报：

return false;

Answer 2

供将来参考

接受的答案完全有效，应该在您的案例中使用，但我也会提供答案以供将来参考。

我有一些约束，所以我在现有的jQuery UI Slider小部件的基础上创建了一个扩展。它有其他选项（其中一些与最小和最大幻灯片范围大小有关）。

使用详细代码查看my blog post。

所有更改都与范围滑块相关，包括

设置最小和最大范围大小
较低范围边界最大允许值
上限范围最小允许值
自动范围滑动（当达到最大范围尺寸时，拖动手柄拖动另一个手柄以保持最大范围尺寸）

jquery滑块范围的最小差异

2 个答案:

供将来参考