Question

So I’m trying to get something working like these:
got old value in one handler, which got it’s own look, and these one should be static (user can’t move it)
Second one should be with its own look also and should be dragable in both sides compare to first one, can get smaller or bigger value.

for example got range from 0-50
white marker is on 23
and other red handler will be dragable on other value (bigger or smaller) giving a range (colored bar) and a value difference (it also can be negative number)
So I put the second marker on 21 and it will give -2.

So I tried many times with ranged slider, add static to single one, but didn’t get solution, not even close.

Any suggestions will be highly appreciated.

Answer 1

The general idea is to figure out which handle you don’t want to move and then cancel the slide event for it. 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();

​