Slider: change event is too greedy with mouse drag

Fixes gh-7649
Closes gh-7653

(cherry picked from commit 32f471c)

Author: cgack

js/widgets/forms/slider.js

@@ -514,7 +514,7 @@ $.widget( "mobile.slider", $.extend( {
 
 			// update control"s value
 			if ( isInput ) {
-				valueChanged = control.val() !== newval;
+				valueChanged = parseFloat( control.val() ) !== newval;
 				control.val( newval );
 			} else {
 				valueChanged = control[ 0 ].selectedIndex !== newval;

tests/unit/slider/index.html

@@ -132,6 +132,10 @@
 			<input type="range" name="disable-input-test" id="disable-input-test" value="17" min="0" max="100" />
 		</label>
 
+		<div data-role="fieldcontain">
+			<input type="range" name="slider-change-event" id="slider-change-event" value="2" min="0" max="4" step="1" />
+		</div>
+
 	</div>
 
 	<div id="enhancetest">

tests/unit/slider/slider_core.js

@@ -95,17 +95,6 @@
 		testDisabled( "After setting option 'disabled' to true a second time: ", true );
 	});
 
-	test( "refresh is triggered on mouseup", function() {
-		expect( 1 );
-		var slider = $( "#mouseup-refresh" );
-
-		slider.val( parseInt(slider.val(), 10) +  10 );
-		slider.change(function() {
-			ok( true, "slider changed" );
-		});
-		slider.trigger( "mouseup" );
-	});
-
 	test( "slider tooltip & button values should match after input value changes", function() {
 		var slider = $("#tooltip-test-both");
 		var sliderHandle = slider.siblings(".ui-slider-track").children(".ui-slider-handle");

tests/unit/slider/slider_events.js

@@ -459,6 +459,32 @@
 		], 500);
 	});
 
+	test( "mouse move only triggers the change event when the value changes", function() {
+		var control = $( "#slider-change-event" ),
+			widget = control.data( "mobile-slider" ),
+			slider = widget.slider,
+			handle = widget.handle,
+			changeCount = 0,
+			actualChanges = 0,
+			changeFunc = function( e ) {
+				++changeCount;
+				if ( control.val() !== currentValue ) {
+					++actualChanges;
+				}
+			},
+			offset = handle.offset(),
+			currentValue = control.val();
+
+		control.bind( "change", changeFunc );
+
+		slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
+		slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
+
+		control.unbind( "change", changeFunc );
+
+		strictEqual( actualChanges, changeCount, "change events match actual changes in value" );
+	});
+
 	// NOTE this test isn't run because the event data isn't easily accessible
 	// and with the advent of the widget _on method we are actually testing the
 	// widget from UI which has it's own test suite for these sorts of things