ns-ui / loud
Precision-tuning slider whose readout is a plate of a few thousand sand grains: off target they churn in a formless haze, on target they lock into a crisp symmetric Chladni figure and hold still — distance-to-correct read as pattern coherence, not a number.
Use when a calibration-style input with a correct or resonant answer — matching a reference value, tuning a threshold, gain-staging — where nearness itself needs richer, continuous feedback than a checkmark at the end, the way tuning by ear works. Distance-to-correct is encoded as order-emerging-from-chaos particle behavior on a sand plate, deliberately directionless (it never says which way to turn). Reach for dial-moire instead when the feedback channel should be optical interference on a dial rather than particle coherence, or slider-loupe for plain precise value-reading with no target to converge on.
Install
npx shadcn add https://design.helpmarq.comns-ui / slider-chladni-tune — tune by ear, not by number
converging
drag the plate into alignment — no number tells you when
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | — | controlled value; omit for uncontrolled |
| defaultValue? | number | — | — |
| target | number | — | the value the plate resolves at — never rendered as a number in the UI |
| min? | number | — | — |
| max? | number | — | — |
| step? | number | — | — |
| detuneSpan? | number | — | value distance at which detune reaches 1 (full chaos). default: 25% of the range |
| lockEpsilon? | number | — | value distance within which the plate is considered locked. default: max(step, 0.5% of the range) |
| mode? | readonly [number, number] | — | override the auto-derived Chladni mode (n, m); n === m is rejected as degenerate |
| grainCount? | number | — | sand grain count on the canvas plate. default 2200 |
| onValueChange? | (value: number) => void | — | — |
| className? | string | — | — |
| aria-label? | string | — | — |