ns-ui
Slider read through a circular magnifying loupe riding the thumb: the tick beneath sits sharp at 1.8x inside the lens while the rest of the scale rests soft-focus; rubber-banding past the bounds wobbles the magnification on release.
Use when a slider read through a circular magnifying loupe that rides the thumb, sharpening the tick beneath it while the rest of the scale stays soft-focus; use for precise value-reading (audio scrub, zoom level), not a destructive confirm gesture; pick slider-vernier instead when the final digit needs ceremony and precision is the whole point, slider-range-shear when two bounds are being set rather than one value, or confirm-slide-shatter when the drag is the destructive confirm this line rules out.
Install
npx shadcn add https://design.helpmarq.comns-ui / slider-loupe — the lens is the readout
Signal Terrain — Field Recordings, Vol. II
Magnification of the editor timeline.
drag past either end for a rubber-band wobble · arrows / PageUp / Home steer the lens
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | — | controlled value; omit for uncontrolled |
| defaultValue? | number | 50 | — |
| min? | number | 0 | — |
| max? | number | 100 | — |
| step? | number | 1 | — |
| tickStep? | number | — | minor tick interval in value units; auto-derived when omitted |
| majorEvery? | number | 5 | every Nth minor tick is major and labeled |
| formatLabel? | (v: number) => string | — | tick label text (drawn on canvas) |
| formatValue? | (v: number) => string | — | aria-valuetext for the current value |
| onValueChange? | (v: number) => void | — | — |
| className? | string | — | — |
| aria-label? | string | "Value" | — |