jquery-ui-slider - 如何使 slider handle 之间的范围固定？

Question

我正在我正在从事的项目之一中使用 jQuery UI Slider，并且需要以某种方式限制用户可以选择的范围。 slider 上有 2 个拖动器。值，例如 [0, 100]，左拖动为 50，右拖动为 55。当左拖动移动到 45 时，我需要将右拖动移动到 50，因此差值始终为 5。当我更改右侧拖动器位置。例如，如果右侧拖动器移至 60，则左侧拖动器应移至 55。我尝试按以下方式执行操作:

if((ui.values[ 1 ] - ui.values[ 0 ]) > 5) {
    $("#slider").slider("values", 0, ui.values[ 0 ] + 5);
    $("#slider").slider("values", 1, ui.values[ 1 ]);
}

但是这似乎不太正常。

谁能告诉我如何实现这一目标？

谢谢!

Answer 1

试试这个..这一定有效..

$("#slider-range").slider({
    slide: function(e, ui){
        var index = $(this).children("a").index(ui.handle);
        var next = (index == 0) ? 1 : 0;
        if((ui.values[ 1 ] - ui.values[ 0 ]) >= 5) {
            var newVal = (index == 0) ? ui.values[ 0 ] + 5 : ui.values[ 1 ] - 5;
            $("#slider-range").slider("values", next, newVal);
        }
    }
});