Slider

Base UICopy Anchor Link

Slider exposes a draggable thumb on a track for choosing one number or a min–max pair between min, max, and step. Label, description, and error copy follow the shared field pattern; orientation, disabled state, and value change handlers pass through Base UI.

Pass a two-element value / defaultValue array for range mode; the component detects dual thumbs automatically. Show the live number with renderValue (true for default mono formatting, or a function that owns the value slot). The track fills its container — grow it with a parent Stack expandChildren or a sized host, not fixed pixel lengths.

When to useCopy Anchor Link

• A continuous numeric interval where position on a scale matters (amount, price band, saturation)
• Dual-thumb ranges, external label rows, or linked vertical bands

When not to useCopy Anchor Link

• A typed number with steppers rather than a track → NumberField
• Discrete named options → Select or Radio
• A read-only fill level the user does not drag → Meter
• Indeterminate or route-level loading → LinearProgress

RelatedCopy Anchor Link

• NumberField — typed numbers with increment and decrement
• Select — named closed choices
• Radio — short visible single-choice sets
• Meter — read-only scalar on a track

Common examplesCopy Anchor Link

Single thumb with captionsCopy Anchor Link

A labeled single-thumb value with a custom renderValue formatter and sibling min/max captions under the track is the default numeric filter pattern. Captions stay as Text in a row — not track CSS.

Dual thumbsCopy Anchor Link

Pass a two-element array for dual thumbs. Name each thumb with thumbAriaLabel, and format the value slot with a renderValue function when currency or units need custom copy.

Controlled previewCopy Anchor Link

Keep the Slider controlled and wire onValueChange into related UI — here a photo preview follows saturation.

External label rowCopy Anchor Link

When the visible name lives beside the track — icon, title, trailing percent — omit label on Slider and pass aria-label / thumbAriaLabel so the thumb stays named. Parent Stack expandChildren grows the track. Give the value a minInlineSize so single- and triple-digit percents do not shift the layout.

Linked vertical bandsCopy Anchor Link

Vertical bands need a sized host (style={{ blockSize }} — Stack has no height prop) with expandChildren so the Slider grows and the band label opts out via data-grow="false". Dragging one thumb can wave neighbors — freeze an anchor at gesture start, apply falloff by band distance, and commit with onValueCommitted. Preset buttons set the whole curve from outside.

Ask your agentCopy Anchor Link

Add a Minimum payout Slider from $50 to $10,000 in $50 steps, show the live value beside the label, and put $50 / $10,000 captions under the track.