100% width on Customizer Range Controls

[domainsupport]

Hello,

Is it possible to add ...

.customize-control input[type="range"] {
width: 100%;
}

... into /wp-admin/load-styles.php so that range controls in the Customizer are as wide as possible allowing for smaller increments to be more easily obtained by the user?

Thank you,

Oliver

[dlh]

Welcome back @domainsupport, and thanks for the ticket!

This enhancement makes sense to me, and there's precedent for it with <select> controls in [40567]. Would you be interested in submitting a patch?

We're a little close to the enhancements deadline for 5.9, but this might be a change that could sneak in so as to receive feedback during beta.

[sabernhardt]

Adding the range input to the middle of this selector list would set them to 100% width, without any margin.

[domainsupport]

No problem @dlh, I've not done that before but think the attached file is correct. I've put it in the selector list that @sabernhardt referenced.

[domainsupport]

Add 100% width to range input in Customizer

[dlh]

Thanks @domainsupport! I tested the patch in a few browsers on macOS, and it worked as advertised. I'd welcome more feedback, but to my eyes, this is worth a shot.

[domainsupport]

Thank you! :)

[hellofromTonya]

In 51996:

Customizer: Make range controls full width.

Adds CSS for range controls in the Customizer to be as wide as possible allowing for smaller increments to be more easily obtained by the user.

Follow-up to [28930].

Props domainsupport, dlh, sabernhardt, audrasjb.
Fixes #54329.