ns-ui
Dual-handle range slider whose selected span is a taut band of material: it visibly shears under drag velocity while the far handle stays planted, then snaps flat with a slight overshoot on release.
Use when a bounded min/max interval (price range, date window, size limit) where the two ends must read as one connected span, not two independent thumbs — the selected band visibly shears under drag velocity toward whichever handle is moving, with the other handle staying put as the anchor, then relaxes flat with a slight overshoot on release. Pick slider-loupe instead for a single value read through precision magnification (audio scrub, zoom level); that job has one thumb and no second bound to relate it to.
Install
npx shadcn add https://design.helpmarq.comns-ui / slider-range-shear — the span is one taut object, not two thumbs
Monthly rent, London
drag a grip fast — the band leans with it, then snaps flat
Which nights the booking covers.
| Prop | Type | Default | Description |
|---|---|---|---|
| min? | number | — | — |
| max? | number | — | — |
| step? | number | — | — |
| value? | [number, number] | — | controlled [min, max] value; omit for uncontrolled |
| defaultValue? | [number, number] | — | — |
| onValueChange? | (value: [number, number]) => void | — | — |
| formatValue? | (v: number) => string | — | formats a bound for both the printed readout and aria-valuetext |
| minLabel? | string | — | accessible name for the lower-bound input |
| maxLabel? | string | — | accessible name for the upper-bound input |
| className? | string | — | — |