Skip to content
This repository
Browse code

bind to vmouseup for refresh Fixes #4756

Browsers like chrome provide an up and down arrow for range/number inputs
but they don't fire the change even until the control is blurred. Here we bind
to the mouseup and check if the value has been altered. If it has we refresh
the slider position to reflect the value change.
  • Loading branch information...
commit 34ae4fa03ed510808f39b222e061f9c99771c005 1 parent 2fc47df
John Bender authored

Showing 1 changed file with 20 additions and 1 deletion. Show diff stats Hide diff stats

  1. 21  js/widgets/forms/slider.js
21  js/widgets/forms/slider.js
@@ -73,7 +73,9 @@ $.widget( "mobile.slider", $.mobile.widget, {
73 73
 
74 74
 			options;
75 75
 
76  
-        domHandle.setAttribute( 'href', "#" );
  76
+		this._type = cType;
  77
+
  78
+		domHandle.setAttribute( 'href', "#" );
77 79
 		domSlider.setAttribute('role','application');
78 80
 		domSlider.className = ['ui-slider ',selectClass," ui-btn-down-",trackTheme,' ui-btn-corner-all', inlineClass, miniClass].join( "" );
79 81
 		domHandle.className = 'ui-slider-handle';
@@ -169,6 +171,11 @@ $.widget( "mobile.slider", $.mobile.widget, {
169 171
 			}
170 172
 		});
171 173
 
  174
+		// it appears the clicking the up and down buttons in chrome on
  175
+		// range/number inputs doesn't trigger a change until the field is
  176
+		// blurred. Here we check thif the value has changed and refresh
  177
+		control.bind( "vmouseup", $.proxy( self._checkedRefresh, self));
  178
+
172 179
 		slider.bind( "vmousedown", function( event ) {
173 180
 			self.dragging = true;
174 181
 			self.userModified = false;
@@ -301,6 +308,18 @@ $.widget( "mobile.slider", $.mobile.widget, {
301 308
 		this.refresh( undefined, undefined, true );
302 309
 	},
303 310
 
  311
+	_checkedRefresh: function() {
  312
+		if( this.value != this._value() ){
  313
+			this.refresh( this._value() );
  314
+			this.value = this._value();
  315
+		}
  316
+	},
  317
+
  318
+	_value: function() {
  319
+		return  this._type === "input" ?
  320
+			parseFloat( this.element.val() ) : this.element[0].selectedIndex;
  321
+	},
  322
+
304 323
 	refresh: function( val, isfromControl, preventInputUpdate ) {
305 324
 
306 325
 		if ( this.options.disabled || this.element.attr('disabled')) {

0 notes on commit 34ae4fa

Please sign in to comment.
Something went wrong with that request. Please try again.