jquery - JQuery UI 一个滑块上有两个不同的处理程序

Question

所以我试图让一些东西像这样工作：在一个处理程序中获得旧值，它有自己的外观，并且这些应该是静态的（用户不能移动它）第二个也应该有自己的外观并且应该与第一个相比，两边都可以拖动，可以获得更小或更大的值。

例如，范围从 0-50 白色标记在 23 上，其他红色处理程序将可拖动到其他值（更大或更小）上，给出范围（彩色条）和值差（它也可以是负数）所以我把21 上的第二个标记，它将给出-2。

所以我用范围滑块尝试了很多次，将静态添加到单个，但没有得到解决方案，甚至没有关闭。

任何建议将不胜感激。

Answer 1

一般的想法是找出你不想移动的句柄，然后取消它的滑动事件。 在这里摆弄

var firstHandle, secondHandle;

$("#slider​​​​​​​").slider({
    values: [0,50],
    slide: function(event, ui){
        var handleElem = $(ui.handle).get(0);
        if( handleElem == secondHandle.get(0)) {
            return false; //cancel slide
        }
    }
});
firstHandle = $("#slider").find(".ui-slider-handle:first");
secondHandle = firstHandle.next();

​</p>