Slider

Pick a value or a range by dragging.

Base UI SliderSource

Label and value

Use this for a value in a range, where the position matters more than the exact number. Slider.Value shows the value, and its digits roll when it changes.

Sample rate
40

Step and maximum

Set max and step on Slider.Root. This slider moves in steps of 50, from 0 to 5,000.

Events per second
1,250

Range

Use a range for a minimum and a maximum. Pass an array of two values, and add one Slider.Thumb for each value.

Session length (minutes)
20 – 80

Disabled

Set disabled on Slider.Root. The track and the thumb get 50% opacity.

Data retention (days)
30

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Give each thumb an aria-label. In a range slider, also set index on each thumb.
  • When the exact number matters, show Slider.Value or use a NumberField.

API

Props that the library adds. Every part also takes all the Base UI props.

Slider.Value

PropTypeDefaultDescription
children(formattedValues, values) => ReactNodeAn odometerRenders the value. Pass a function to replace the rolling digits.