Slider: Pass handle index to events

Added a `handleIndex` property to the event data which indicates the index of
the handle being changed.

Fixes #7630
Closes gh-1486

tests/unit/slider/slider_events.js

@@ -149,4 +149,41 @@ test( "mouse based interaction part two: when handles overlap", function() {
 
 });
 
+test( "event data", function() {
+	expect( 4 );
+
+	var slideHandleIndex = 3,
+		values = [ 8, 9, 7, 4 ],
+		newValues = [ 8, 9, 7, 5 ],
+		element = $( "#slider1" )
+			.slider({
+				values: values,
+				start: function( event, ui ) {
+					deepEqual( ui, expectedUiHash, "passing ui to start event" );
+				},
+				slide: function( event, ui ) {
+					deepEqual( ui, expectedChangedUiHash, "passing ui to slide event" );
+				},
+				stop: function( event, ui ) {
+					deepEqual( ui, expectedChangedUiHash, "passing ui to stop event" );
+				},
+				change: function( event, ui ) {
+					deepEqual( ui, expectedChangedUiHash, "passing ui to change event" );
+				}
+			}),
+		handles = element.find( ".ui-slider-handle" ),
+		expectedUiHash = {
+			handle: handles.eq( slideHandleIndex )[ 0 ],
+			handleIndex: slideHandleIndex,
+			values: values,
+			value: values[ slideHandleIndex ]
+		},
+		expectedChangedUiHash = $.extend( {}, expectedUiHash, {
+			values: newValues,
+			value: newValues[ slideHandleIndex ]
+		});
+
+	handles.eq( slideHandleIndex ).simulate( "drag", { dx: 10 } );
+});
+
 })( jQuery );

ui/slider.js

@@ -297,88 +297,72 @@ return $.widget( "ui.slider", $.ui.mouse, {
 		return this._trimAlignValue( valueMouse );
 	},
 
-	_start: function( event, index ) {
+	_uiHash: function( index, value, values ) {
 		var uiHash = {
 			handle: this.handles[ index ],
-			value: this.value()
+			handleIndex: index,
+			value: value || this.value()
 		};
-		if ( this.options.values && this.options.values.length ) {
-			uiHash.value = this.values( index );
-			uiHash.values = this.values();
+
+		if ( this._hasMultipleValues() ) {
+			uiHash.value = value || this.values( index );
+			uiHash.values = values || this.values();
 		}
-		return this._trigger( "start", event, uiHash );
+
+		return uiHash;
+	},
+
+	_hasMultipleValues: function() {
+		return this.options.values && this.options.values.length;
+	},
+
+	_start: function( event, index ) {
+		return this._trigger( "start", event, this._uiHash( index ) );
 	},
 
 	_slide: function( event, index, newVal ) {
-		var otherVal,
-			newValues,
-			allowed;
+		var allowed, otherVal,
+			currentValue = this.value(),
+			newValues = this.values();
 
-		if ( this.options.values && this.options.values.length ) {
+		if ( this._hasMultipleValues() ) {
 			otherVal = this.values( index ? 0 : 1 );
+			currentValue = this.values( index );
 
-			if ( ( this.options.values.length === 2 && this.options.range === true ) &&
-					( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
-				) {
-				newVal = otherVal;
+			if ( this.options.values.length === 2 && this.options.range === true ) {
+				newVal =  index === 0 ? Math.min( otherVal, newVal ) : Math.max( otherVal, newVal );
 			}
 
-			if ( newVal !== this.values( index ) ) {
-				newValues = this.values();
-				newValues[ index ] = newVal;
-				// A slide can be canceled by returning false from the slide callback
-				allowed = this._trigger( "slide", event, {
-					handle: this.handles[ index ],
-					value: newVal,
-					values: newValues
-				} );
-				otherVal = this.values( index ? 0 : 1 );
-				if ( allowed !== false ) {
-					this.values( index, newVal );
-				}
-			}
+			newValues[ index ] = newVal;
+		}
+
+		if ( newVal === currentValue ) {
+			return;
+		}
+
+		allowed = this._trigger( "slide", event, this._uiHash( index, newVal, newValues ) );
+
+		// A slide can be canceled by returning false from the slide callback
+		if ( allowed === false ) {
+			return;
+		}
+
+		if ( this._hasMultipleValues() ) {
+			this.values( index, newVal );
 		} else {
-			if ( newVal !== this.value() ) {
-				// A slide can be canceled by returning false from the slide callback
-				allowed = this._trigger( "slide", event, {
-					handle: this.handles[ index ],
-					value: newVal
-				} );
-				if ( allowed !== false ) {
-					this.value( newVal );
-				}
-			}
+			this.value( newVal );
 		}
 	},
 
 	_stop: function( event, index ) {
-		var uiHash = {
-			handle: this.handles[ index ],
-			value: this.value()
-		};
-		if ( this.options.values && this.options.values.length ) {
-			uiHash.value = this.values( index );
-			uiHash.values = this.values();
-		}
-
-		this._trigger( "stop", event, uiHash );
+		this._trigger( "stop", event, this._uiHash( index ) );
 	},
 
 	_change: function( event, index ) {
 		if ( !this._keySliding && !this._mouseSliding ) {
-			var uiHash = {
-				handle: this.handles[ index ],
-				value: this.value()
-			};
-			if ( this.options.values && this.options.values.length ) {
-				uiHash.value = this.values( index );
-				uiHash.values = this.values();
-			}
-
 			//store the last changed value index for reference when handles overlap
 			this._lastChangedValue = index;
-
-			this._trigger( "change", event, uiHash );
+			this._trigger( "change", event, this._uiHash( index ) );
 		}
 	},
 
@@ -415,7 +399,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
 				}
 				this._refreshValue();
 			} else {
-				if ( this.options.values && this.options.values.length ) {
+				if ( this._hasMultipleValues() ) {
 					return this._values( index );
 				} else {
 					return this.value();
@@ -512,7 +496,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
 			val = this._trimAlignValue( val );
 
 			return val;
-		} else if ( this.options.values && this.options.values.length ) {
+		} else if ( this._hasMultipleValues() ) {
 			// .slice() creates a copy of the array
 			// this copy gets trimmed by min and max and then returned
 			vals = this.options.values.slice();
@@ -586,7 +570,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
 			animate = ( !this._animateOff ) ? o.animate : false,
 			_set = {};
 
-		if ( this.options.values && this.options.values.length ) {
+		if ( this._hasMultipleValues() ) {
 			this.handles.each(function( i ) {
 				valPercent = ( that.values(i) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100;
 				_set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
@@ -662,7 +646,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
 			}
 
 			step = this.options.step;
-			if ( this.options.values && this.options.values.length ) {
+			if ( this._hasMultipleValues() ) {
 				curVal = newVal = this.values( index );
 			} else {
 				curVal = newVal = this.value();