Scrub field

A number you can type or drag, the way a pro tool’s value field works: an engraved ruler under the numerals slides beneath a fixed index as the value moves.

Drag a ruler or a label; hold Shift for ×10, Alt for ×0.1. Click to type, Enter to take it. The rate limit locks the pointer for endless drags.

• The input is a role="spinbutton" with aria-valuenow, aria-valuemin, aria-valuemax and an aria-valuetext that carries the unit (“600 requests per minute”). Its name is the printed label that wraps it.
• Everything a drag does, the keyboard does: arrows, Page keys, Home and End, typing. Dragging is never required.
• Typed text that is not a number sets aria-invalid and a custom validity message, and the hint below says the range; nothing typed is thrown away.
• Only the ruler and the label take touch-action: none: on a phone the page scrolls from anywhere else, and a tap on the numerals opens the decimal keypad.
• The ruler and index are decoration for the number above them (aria-hidden). Reduced motion stops the ruler gliding and the stop’s knock; the number, the stop and the lit index still show.