Range Components
Range Slider Examples
Simple Range
With Label
Show Value (Positions)
All Sizes
All Colors
With Steps and Markers
Custom Format
With Helper Text
Adjust screen brightness
Volume level from 0 to 100
With Error
Value must be at least $500
Disabled
Controlled Range
Practical Use Cases
Audio Settings
Filter Products
Maximum price
Customer Satisfaction Survey
0 = Not at all likely, 10 = Extremely likely
Image Adjustments
Dual Range (start + end)
range — two draggable handles pick a start and an end value.value/defaultValue are [start, end] tuples andonChange returns a sorted [start, end]. Horizontal only.
Same thing via the dedicated DualRange component (import DualRange from '.../components/ranges/DualRange') — no range prop needed.
Each handle is now labeled for screen readers (aria-label « start » / « end ») and exposes the formatted value (aria-valuetext, here « 5°C » / « 25°C »). Override the names with startAriaLabel / endAriaLabel. Inspect the two inputs to verify.
minGap — the handles keep at least a fixed distance apart (here minGap=10, so start and end can never get closer than 10).
Click anywhere on the rail below — the nearest handle jumps to that spot (like a native slider). Works on every dual range now.
onChangeEnd fires once on release (not on every tick) — ideal for API-backed filters. Drag below : the live value updates continuously, the badge only updates when you let go.
Drag both handles to set a min and max
Start must be at least 500
Vertical
orientation="vertical" — height adjustable via the height prop (default h-64). Markers are not rendered in vertical mode.