Numeric input
Spin box and slider. One is for entering a number the clinician knows; the other is for exploring a range where the exact value does not matter — and confusing them puts an approximation into a clinical record.
Overview
A slider is a fast, imprecise, satisfying control. Those first two properties are in tension in clinical software, and precision wins: a value a clinician knows is typed, not dragged towards.
| Control | Use when | Never for |
|---|---|---|
| Spin box | A specific value is being entered or adjusted — a measurement, a threshold, a count | Ranges so large that stepping is impractical |
| Slider | A view parameter where feedback is continuous and the exact number does not matter — gain, sweep speed, zoom, playback position | Any value that will be recorded |
A slider cannot be operated precisely with gloves, on a moving cart, or with a tremor, and it has no state in which it is "unanswered" — it always shows a value, so a form submitted untouched records whatever it happened to be pointing at. Any number that will be stored, trended or acted on is entered as a spin box or text field. Sliders are for view parameters only, where the effect is immediately visible and nothing is written down.
Typed first
Every numeric control accepts a typed value. Steppers assist; they never replace the keyboard.
Never silently changed
No scroll wheel, no drag-past-the-limit, no rounding that happens without saying so.
Unit-bound
The unit is part of the control, visible at all times — the same rule as Key–value pair.
Anatomy
A view parameter. Nothing is recorded, and the current value is stated on the trace — see ECG review.
Rules
- Never
type="number". Its scroll-wheel behaviour changes values silently and its spinners are too small to hit. Usetype="text"withinputmode="decimal"— the same rule as Text field. - Stepper buttons meet the touch floor and state their step in the accessible name: "Increase by 0.1 mm", not "Increase".
- Out of range confirms, never rejects. A physiologically unusual value may be correct — see Text field.
- Rounding is stated. If entry is rounded to the step, say so on blur rather than silently rewriting what was typed.
- Sliders show their current value as text, always, and never rely on knob position alone.
- Sliders snap to documented steps — gain moves between real settings, not continuously to a value no clinician can reproduce.
- Non-default view parameters are flagged wherever the output is read, so a colleague knows they are not looking at standard calibration.
Typed, unit-bound, precise. The steppers are a convenience, not the route.
A recorded clinical value on a slider. Untouched it still reads something, and nobody can hit 1 240 gloved.
Do's and don'ts
Typed, unit-bound, precise. Steppers state their increment in the accessible name.
A recorded clinical value on a slider. Untouched it still reads something, and nobody hits 1 240 gloved.
Accessibility
- Spin box is a text input with
role="spinbutton"andaria-valuenow/min/max; arrow keys step, Page Up/Down step larger, Home/End go to the bounds. - Slider uses
role="slider"witharia-valuetextcarrying the unit — "10 millimetres per millivolt", not "10". - Both are keyboard-complete. No numeric control depends on dragging.
- Slider knob meets the physical touch floor, which usually means a longer track rather than a bigger knob — see Scaling.
- Never trap the scroll wheel. Scrolling over a numeric control scrolls the page.
- Value announced on change, not on every intermediate step while dragging.
Outcomes of use
What this contributes to, in the terms of Usability & context of use. These are attributes believed to contribute to an outcome; the outcome itself is settled by observing real use in a specified context, not by this page.
- Effectiveness — the number recorded is the number meant, to the precision meant, in the units meant.
- Efficiency — typing a known value beats stepping to it; the steppers exist for adjustment, not entry.
- Satisfaction — confidence that nothing changed while scrolling past. That doubt, once earned, makes a clinician re-check every numeric field on the screen.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1).
- Sliders never carry recorded clinical values. Mitigates: an approximate or untouched value entering the record.
- No
type="number", no scroll-wheel capture. Mitigates: a value silently changed by a scroll gesture. - Unit bound to the control. Mitigates: order-of-magnitude error from an assumed unit.
- Out of range confirms rather than rejects. Mitigates: a true extreme value being un-enterable.
- Rounding disclosed. Mitigates: a stored value differing from the one typed without the clinician knowing.
- Steppers state their step size. Mitigates: adjusting by an unexpected increment.
- Non-default view parameters flagged at the point of reading. Mitigates: misinterpreting amplitude because gain was changed.
Implementation
$ npx shadcn@latest add https://md.notjustany.tech/r/numeric-input.json<SpinBox
label="Alarm threshold — ST elevation"
unit="mm" // required
min={0.5} max={5.0} step={0.1}
value={value} onChange={setValue}
/>
<Slider
label="Display gain"
unit="mm/mV"
steps={[5, 10, 20]} // documented settings, not a continuum
recorded={false} // the only permitted value
/>
// Enforced at the component boundary.
if (recorded) {
throw new Error(
"[Slider] recorded values cannot be entered on a slider. Use SpinBox."
)
}Related
- Text field — the input rules underneath.
- Key–value pair — how the result is displayed.
- ECG review — gain as a view parameter.
- Scaling & displays — target sizes.