# 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. Kit part · Free · https://tactileui.dev/parts/scrub - Element: ` + ` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Forms, Inputs, Numbers, Sliders & faders - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Plain · agent temperature ```html

Temperature

``` ### With a unit · kW, ms, tokens ```html

Export limit

Max tokens

``` ### Compact · in a table cell ```html

Region	Weight
eu-west
us-east
ap-south

``` ### Inspector row · label on the left ```html

Timeout

Retries

Backoff

``` ### Detents · half degrees ```html

Setpoint

``` ### Error · what was typed stays ```html

Temperature

The agent’s sampling.

``` ### Disabled · set by policy ```html

Canary weight

Locked while the incident is open.

0 repeats itself; 2 wanders. Rate limit

``` ```js import '/kit/kit.mjs'; // defines const temp = document.querySelector('tui-scrub input[name="temperature"]'); temp.addEventListener('input', () => preview(Number(temp.value))); // while it moves temp.addEventListener('change', () => save(Number(temp.value))); // when it settles // Or read and set the number on the element; setting fires nothing. const field = temp.closest('tui-scrub'); field.value = 0.2; ``` The demo on the page: ```html ``` ## Usage notes 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. ## Accessibility - 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. ## How it’s built One custom element around a real input. The ruler is a single strip whose ticks are three repeating backgrounds (fine every step, a longer one halfway, a long one at each round-numbered major) each an ink line with a lit line beside it, so the cuts read engraved; the numbers are spans placed along it. The strip moves by `transform` only, under a fixed index: a printed pointer over a hairline that turns amber with a lamp’s glow while you set the value. Past each end a heavy stop and hatching are printed on the strip, so at min or max the stop arrives under the index; a push past it knocks the hairline 1.5px and lets it settle. The window’s ends are masked away, as a tape curls over its drums. Drags use pointer capture, a 3px dead zone and a smoothed speed-to-gain curve capped at ×4; `data-lock` adds pointer lock. ## Rules Type it, or drag the ruler. Keys move by the step, a drag reaches the precision, and the index lights only while you are setting it. The full rules are in `scrub.rules.md` in the brain, which ships with the Kit. ## Related parts - [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error. - [Stepper](https://tactileui.dev/parts/stepper): A small integer with − and + keys either side, in one well. - [Knob](https://tactileui.dev/parts/knob): A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.