Use jQuery ui range slider with same handle values without overlap

Question

I am using the jQuery ui-slider. In the range slider, if I select the same range using both the handles, one handle is hiding behind the another handle. I just want to meet both the handles if the same range has choosen. Kindly help me.

$("#dvSliderRange2").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 40],
    step: 10,
    slide: function(event, ui) {
        if (ui.values[0] == ui.values[1]) {
            return false;
        }
        $("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);
    }
});

If value is same than they should overlap. If you want to see both handlers at a time than just position them one up and other down using css so both are available all the time — Aamir Afridi, Sep 24 '12 at 14:55
Can you be more specific as to what you mean by "meet both the handles"? — karancan, Mar 24 '13 at 20:58
i want it shouldnt be overlap if the price or time is same.. — supersaiyan, Mar 27 '13 at 09:27

score 1 · Answer 1 · answered Apr 13 '13 at 00:25

I have a solution using some css below. This adds a class to the element when they are equal. Css then positions these handles so they are both visible.

http://jsfiddle.net/dhQk/jTx89/

However, in the case of interactivity. It is not possible without some modification to the slider code. I've included src from jquery slider 1.10.2. Starting from line 176 of the src.

this.handles.each(function( i ) {
    var thisDistance = Math.abs( normValue - that.values(i) );
    if (( distance > thisDistance ) ||
        ( distance === thisDistance &&
            (i === that._lastChangedValue || that.values(i) === o.min ))) {
        distance = thisDistance;
        closestHandle = $( this );
        index = i;
    }
});

As you can see from this, it the handle is not actually chosen by which handle you choose but programatically by distance of where you clicked. Not sure why it was decided this is how they would do it but it wont allow you to interact with them separately once they are the same value;

Actually I just figured it out, they do this to allow you to click anywhere on the bar and be able to start sliding. — dane fairbanks, Apr 13 '13 at 00:27

Use jQuery ui range slider with same handle values without overlap

1 Answers1