Question

我有两个滑块，每个滑块都以一个值和句柄开头。移动一个滑块时，另一个滑块将更改为带有两个手柄的范围滑块。

$( ".factor-slider").slider({
    min: 1,
    max: 5,
    value: 3,
    stop: function (event, ui) {
        updateSliders(event, ui);
    }
});
function updateSliders(event, ui) {
    $("#slider-costs").slider("option", "range", true); // turn on range option
    $("#slider-costs").slider("values", 0, 2); // set min to x
    $("#slider-costs").slider("values", 1, 4); // set max to x
}

这很好用。当我尝试将范围滑块更改回具有单个值和一个句柄的滑块时，会出现问题。我使用此代码将范围设置为false并将单个值设置为3：

function resetAll() {
    $(".factor-slider").slider("option", "range", false);
    $(".factor-slider").slider("value", 3);
}

第一个手柄正确移动到3，但第二个手柄永远不会消失。我期待设置范围为false会这样做。我也尝试添加这一行来清除第二个值：

$(".factor-slider").slider("option", "values", [3])

没有任何区别。我是否需要做一些特定的事情来删除/删除第二个句柄？

这是我fiddle的尝试。移动“任务”滑块以将“成本”滑块转换为范围滑块。单击“重置”将“成本”滑块重新转换为单个手柄滑块，但看到第二个手柄不会消失。

Answer 1

我偶然发现了一个似乎有效的重新排列（虽然我不确定为什么＆＃34;值和＃34; setter需要在那里）：

function resetAll() {
    $(".factor-slider").slider("option", "values", [3]);
    $(".factor-slider").slider("value", 3);
    $(".factor-slider").slider("option", "range", false);
}

JQuery UI Slider：从范围更改为单句柄

1 个答案: