ns-ui
Numeric input built as a true vernier caliper: a fixed coarse tick row over a sliding fine row at 0.9x pitch, where the accent-lit fine tick physically lines up with a main tick to spell the last digit — drag the body for fast absolute moves, drag the vernier scale itself for one-step-per-tick precision.
Use when a numeric field whose last significant digit deserves ceremony — dosages, gain trims, calibration offsets — where the value is set by dragging against a real vernier scale (coarse row for whole units, sliding fine row for the exact final digit) and precision is the point; pick slider-loupe instead when the value is approximate and the magnified-tick reading is just flavor, or stepper-needle when discrete +/- stepping with an adjustment history matters more than drag precision.
Install
npx shadcn add https://design.helpmarq.comns-ui / slider-vernier
Drag the upper half to move fast across the range; drag the sliding scale below it to creep one step per tick. The accent tick on the bottom row is the fine digit — it lines up with a main tick exactly the way a physical caliper reads.
arrows step ±0.1 · PageUp/Down steps a whole unit · Home/End to the rails
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | — | controlled value; omit for uncontrolled |
| defaultValue? | number | — | — |
| min? | number | — | — |
| max? | number | — | — |
| step? | number | — | resolution — the fine (vernier) scale reveals exactly this last digit |
| label? | string | — | accessible name, also shown as the eyebrow caption |
| unit? | string | — | unit suffix rendered beside the value, e.g. "mg", "dB" |
| formatValue? | (v: number) => string | — | aria-valuetext override |
| onValueChange? | (value: number) => void | — | — |
| className? | string | — | — |