Skip to content

Instantly share code, notes, and snippets.

@tlack
Created September 18, 2012 20:30
Show Gist options
  • Save tlack/3745667 to your computer and use it in GitHub Desktop.
Save tlack/3745667 to your computer and use it in GitHub Desktop.
possible bug in jquery ui's slider class and closestHandle? Cannot call method 'addClass' of undefined
_mouseCapture: function( event ) {
var o = this.options,
position,
normValue,
distance,
closestHandle,
self,
index,
allowed,
offset,
mouseOverHandle;
if ( o.disabled ) {
return false;
}
this.elementSize = {
width: this.element.outerWidth(),
height: this.element.outerHeight()
};
this.elementOffset = this.element.offset();
position = { x: event.pageX, y: event.pageY };
normValue = this._normValueFromMouse( position );
distance = this._valueMax() - this._valueMin() + 1;
self = this;
this.handles.each(function( i ) {
var thisDistance = Math.abs( normValue - self.values(i) );
if ( distance > thisDistance ) {
distance = thisDistance;
closestHandle = $( this );
index = i;
}
});
// 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] );
}
// --- >8 --- >8 --- >8 --- >8 ---
//
// HERE'S MY FIX, FROM @TLACK
// fell through all other attempts? find at least the first
// handle..
if (!closestHandle) {
index = 0;
closestHandle = $( this.handles[index] );
}
//
// --- >8 --- >8 --- >8 --- >8 ---
allowed = this._start( event, index );
if ( allowed === false ) {
return false;
}
this._mouseSliding = true;
self._handleIndex = index;
closestHandle
.addClass( "ui-state-active" )
.focus();
offset = closestHandle.offset();
mouseOverHandle = !$( event.target ).parents().andSelf().is( ".ui-slider-handle" );
this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
left: event.pageX - offset.left - ( closestHandle.width() / 2 ),
top: event.pageY - offset.top -
( closestHandle.height() / 2 ) -
( parseInt( closestHandle.css("borderTopWidth"), 10 ) || 0 ) -
( parseInt( closestHandle.css("borderBottomWidth"), 10 ) || 0) +
( parseInt( closestHandle.css("marginTop"), 10 ) || 0)
};
if ( !this.handles.hasClass( "ui-state-hover" ) ) {
this._slide( event, index, normValue );
}
this._animateOff = true;
return true;
},
@jedihawk
Copy link

Is there a fix for this?

@dagreat
Copy link

dagreat commented Aug 20, 2013

I made below changes to jquery-ui.js file and that fixed my issue and everything is working smoothly.

                    this.handles.each(function(i) {
                        var thisDistance = Math.abs(normValue - that.values(i));
                        if (!thisDistance)
                            thisDistance = 0;
                        if ((distance > thisDistance) ||
            (distance === thisDistance &&
                (i === that._lastChangedValue || that.values(i) === o.min))) {
                            distance = thisDistance;
                            closestHandle = $(this);
                            index = i;
                        }
                    });
                    if (o.range === true && this.values(1) === o.min) {
                        index += 1;
                        closestHandle = $(this.handles[index]);
                    }
                    allowed = this._start(event, index);
                    if (allowed === false) {
                        return false;
                    }
                    this._mouseSliding = true;

                    this._handleIndex = index;
                    closestHandle
                        .addClass("ui-state-active")
                        .focus();

@wonmanfactory
Copy link

Do you have some decimal values like .5 in your min, max, value value?
Once I changed it to 0.5, it worked

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment