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.
1 parent a8c84df commit 6f3aa9f2fd963415e5000c20660ee3b79cf95af1 @johnbender johnbender committed Jul 27, 2012
Showing with 20 additions and 1 deletion.
  1. +20 −1 js/jquery.mobile.forms.slider.js
@@ -71,7 +71,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 ) {
// NOTE: we don't do this in refresh because we still want to
// support programmatic alteration of disabled inputs
@@ -305,6 +312,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 ) {
// NOTE: we don't return here because we want to support programmatic

0 comments on commit 6f3aa9f

Please sign in to comment.