Proposal: Improve UI stepping behavior in <input type="number">

[xavierholt]

What problem are you trying to solve?

I often find myself writing UIs where users can edit values in HTML forms, and part of the page dynamically updates in response. Some users will know what values they want, and will want to enter them as precisely as possible, but others will want to experiment and look at a range of values. The step attribute on an <input type="number"> isn't able to handle both of these cases gracefully.

For example, consider an input that controls the width of an image in pixels. If step="1", users can specify the exact dimensions they need, but the increment/decrement arrows that browsers add to the input are basically useless to users who want to see an image in any reasonably large range of sizes. If step="10" (or some other larger number), users can now compare image sizes easily in the browser, but since step is used for validation, anyone who wants an image size that isn't a multiple of step is now out of luck.

What solutions exist today?

Currently, I set step to as small a value as reasonable so that I can accept all valid inputs. Users who want to compare a range of values have to edit the number as text, which works but is inefficient.

How would you solve it?

I propose adding another attribute to <input type="number"> elements: something like step-default or step-user or ui-step or step-large. This attribute is not used for validation - it only controls the default increment in response to a user action:

• If step-default isn't specified, it takes on the same value as step.
• If step-default is specified, it should be a positive multiple of step.
• When users increment or decrement an <input type="number"> through a UI (usually through clicking the arrow buttons or using the up/down keys), the value of the input changes by step-default.
• Users who need finer-grained control can add a modifier key (I'd suggest shift) when clicking the arrows / pressing the arrow keys. This will change the value by step instead of by step-default.

Anything else?

No response