ui-slider overlapping slider impossible to drag

Question

When using the default ui-slider in 1.9.2 there is a smal problem when the two handlebars collide, its impossible to drag the right handlebar.

See here: http://jqueryui.com/slider/#range

Put the two handlebars together, then try to increase the higher value, not working.

Then I found this post:

https://stackoverflow.com/a/4254932/1905754

This is a solution but its to 1.8.6 so I dont find those code rows to edit in 1.9.2. Does anybody know if there is a similiar solution to 1.9.2?

Thanks.

Sorry for incorrect english.

score 0 · Answer 1 · answered Dec 30 '12 at 15:28

0

try to find this below code in jquery.ui.js (function _mouseCapture, line 12313)

        // workaround for bug #3736 (if both handles of a range are at 0,
        // the first is always used as the one with least distance,
        // and moving it is obviously prevented by preventing negative ranges)
        if( o.range === true && this.values(1) === o.min ) {
            index += 1;
            closestHandle = $( this.handles[index] );
        }

        // my fix
        if( o.range === true && this.values(1) === this.values(0) ) {
            if(normValue <= this.values(0)){
                index = 0;
            }
            else {
                index = 1;
            }
            closestHandle = $( this.handles[index] );
        }
        // end of my fix

answered Dec 30 '12 at 15:28

phnkha

7,782
2
24
31

I found the code and replaced it, but unfortunately no differens to the slider. – Dec 30 '12 at 15:48
That's weird! It works for me! I can click on the right side of the handlers to increase max value – phnkha Dec 30 '12 at 16:05
I maybe explained a little bad. I meant, that if you pull the two handlebars together, then click on that handlebar (the two collide so they look like one) and try to slide/drag it to the right thats not working. – Dec 30 '12 at 16:14
How about prevent 2 handlers overlap fully with each other? – phnkha Dec 30 '12 at 16:23
The problem with that is then one specific value cant be choosen, then if I want the value 5 in a range 1-10, it will be 4-5 or 5-6, not only 5. The soloution in my first post is great only problem is that its to 1.8.6. – Dec 30 '12 at 16:31

score 0 · Answer 2 · answered Aug 03 '16 at 12:40

I propose to replace this code _mouseCapture

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

with

this.handles.each(function( i ) {
        if (event.target == that.handles[i]) {
            index = i;
            closestHandle = $( this );
        }
    });

score 0 · Answer 3 · answered Jan 18 '17 at 04:13

This is not a permanent fix but helpful to make slider draggable agian.

$('#slider-range').slider
  start: (event, ui) ->
    # Only when sliders are overriding
    if ui.values[0] == ui.values[1]
      set_min = ui.values[0] - 0.1
      set_max = ui.values[1]
      # Deducing value of left slider by 0.1(or you can give step value based on your condition)
      $('#slider-range').slider('values', [set_min,set_max])
      return false
   slide: (event, ui) ->
     # Some statements
   stop: (event, ui) ->
     # Some statements

ui-slider overlapping slider impossible to drag

3 Answers3

Linked