RangeSlider

Molecule

Numeric range input built on native `<input type="range">`. Single-handle by default, or `range` for a dual-handle min/max selector. Distinct from the `Slider` carousel component.

Single value

Preview
40
Code
const [v, setV] = useState(40);
<RangeSlider label="Volume" value={v} onChange={setV} />

Dual handle (range)

Preview
Price range2070
Code
const [range, setRange] = useState<[number, number]>([20, 70]);
<RangeSlider range label="Price range" value={range} onChange={setRange} min={0} max={100} />
Sourcemodules/ui/RangeSlider.tsx