Components
Slider
Single and range sliders with sizes, controlled state, value labels, and tick marks.
Slider
Sizes
sm
md
lg
Controlled
Match score threshold40%
Show listings with a match score of 40% or higher.
Range (two thumbs)
Budget rangeAED 1.0M – 5.0M
States
Default
Disabled
Step 25
Value labels
valueLabel renders a small pill above each thumb. Use "always" when the value needs to be readable at a glance, "active" for a more restrained look that only reveals on hover/focus/drag. formatValue shapes the rendered text.
valueLabel="always"
valueLabel="active" · hover or focus the thumb
Tick marks
marks renders dots along the track. Pass true for one per step (auto-skips above 21 to avoid clutter on fine sliders), or an explicit array of positions for custom anchors.
marks · auto from step
marks · custom positions