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

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

我偶然发现了一个似乎有效的重新排列（尽管我不确定为什么“值”设置器需要在那里）：

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