CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-slider
supersaiyan
supersaiyan

Reputation: 1730

Use jQuery ui range slider with same handle values without overlap

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]);
    }
});​

Upvotes: 4

Views: 2386

Answers (1)

dane fairbanks
dane fairbanks

Reputation: 116

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;

Upvotes: 1

Related Questions