Scrub field

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<label class="tui-field">
  <span class="tui-label">Temperature</span>
  <tui-scrub min="0" max="2" step="0.1" precision="2">
    <input name="temperature" value="0.70">
  </tui-scrub>
  <span class="tui-hint">0 repeats itself; 2 wanders.</span>
</label>

<label class="tui-field">
  <span class="tui-label">Rate limit</span>
  <tui-scrub min="0" max="6000" step="10" unit="/min" unit-text="requests per minute" data-lock>
    <input name="rate" value="600">
  </tui-scrub>
</label>

import '/kit/kit.mjs';   // defines <tui-scrub>

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;

Needs kit.css and kit.mjs. How to install the kit.

• 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.

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.