Customizer range controls don't update until the mouse is released

[sublink]

When adding customizer control with a type of range, the preview JS doesn't receive an event until the mouse is released.

I believe the customizer is listening for the onchange event, but it looks like that should only be triggered when the user releases the mouse. To get continuous updates, you can use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

However, oninput is not supported in IE10, so you might have to combine the two event handlers.

​https://bugzilla.mozilla.org/show_bug.cgi?id=853670

[westonruter]

sublink: Thanks for the report! Yes, this is a good catch. For the widget controls added in 3.9, changes to the widget forms are being listened to via the change event but also the input (for non-IE) and propertychange events (for IE).

$widgetContent.on( 'change input propertychange', ':input', function( e ) {

So the following change could be made to address the problem:

src/wp-includes/js/customize-base.js

@@ -430 +430 @@
                                                 synchronizer = api.Element.synchronizer[ type ];
                                         if ( 'text' === type || 'password' === type )
                                                 this.events += ' keyup';
+                                        else if ( 'range' === type )
+                                                this.events += ' input propertychange';
                                 } else if ( this.element.is('textarea') ) {
                                         this.events += ' keyup';
                                 }

(Cleanup of JS coding standards notwithstanding.)

[voldemortensen]

Made patch according to comments.

[ocean90]

In 30219:

Customizer: Bind input and propertychange events for range input types.

props voldemortensen, westonruter.
fixes #30223.