Permalink
Browse files

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...
1 parent 2fc47df commit 34ae4fa03ed510808f39b222e061f9c99771c005 @johnbender johnbender committed Jul 27, 2012
Showing with 20 additions and 1 deletion.
  1. +20 −1 js/widgets/forms/slider.js
@@ -73,7 +73,9 @@ $.widget( "mobile.slider", $.mobile.widget, {
options;
- domHandle.setAttribute( 'href', "#" );
+ this._type = cType;
+
+ domHandle.setAttribute( 'href', "#" );
domSlider.setAttribute('role','application');
domSlider.className = ['ui-slider ',selectClass," ui-btn-down-",trackTheme,' ui-btn-corner-all', inlineClass, miniClass].join( "" );
domHandle.className = 'ui-slider-handle';
@@ -169,6 +171,11 @@ $.widget( "mobile.slider", $.mobile.widget, {
}
});
+ // it appears the clicking the up and down buttons in chrome on
+ // range/number inputs doesn't trigger a change until the field is
+ // blurred. Here we check thif the value has changed and refresh
+ control.bind( "vmouseup", $.proxy( self._checkedRefresh, self));
+
slider.bind( "vmousedown", function( event ) {
self.dragging = true;
self.userModified = false;
@@ -301,6 +308,18 @@ $.widget( "mobile.slider", $.mobile.widget, {
this.refresh( undefined, undefined, true );
},
+ _checkedRefresh: function() {
+ if( this.value != this._value() ){
+ this.refresh( this._value() );
+ this.value = this._value();
+ }
+ },
+
+ _value: function() {
+ return this._type === "input" ?
+ parseFloat( this.element.val() ) : this.element[0].selectedIndex;
+ },
+
refresh: function( val, isfromControl, preventInputUpdate ) {
if ( this.options.disabled || this.element.attr('disabled')) {

0 comments on commit 34ae4fa

Please sign in to comment.