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

Question

所以我试图得到像这样的东西： 在一个处理程序中获得旧值，它具有自己的外观，并且这些应该是静态的（用户无法移动它） 第二个也应该有它自己的外观，并且应该可以在两侧比较第一个可拖动，可以得到更小或更大的值。

例如，

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

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

任何建议都将受到高度赞赏。

Answer 1

一般的想法是弄清楚你不想移动哪个句柄，然后为它取消幻灯片事件。 fiddle here

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();