Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@jedihawk jedihawk commented Aug 15, 2013

Is there a fix for this?

@dagreat

This comment has been minimized.

Copy link

@dagreat 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

This comment has been minimized.

Copy link

@wonmanfactory wonmanfactory commented Jul 8, 2014

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