Slider
Select a numeric value or range by dragging along a track.
Default
A single-value slider with a label.
Performance mode with ticks
A stepped slider with tick marks and labels.
Balanced ModePrecision adjustment for demanding tasks.
Range and multi-thumb
Multiple thumbs for selecting consumption bands and alert thresholds.
With value tooltips
Thumbs surface their current value in a tooltip while dragging.
Annual budget: $25k - $60k
Cold: 20°CWarm: 50°CHot: 80°C
API reference
A track-and-thumb control for a value or range; renders one thumb per value.
Full props on Base UI SliderAnatomy
Slider | All-in-one slider: track, filled range, and thumbs from value/defaultValue. |