Slider

Quick Preview

Loan tenor

Composition

Use this public composition when building Slider:

Slider
├── SliderLabel
├── SliderValue
└── SliderControl
    └── SliderTrack
        ├── SliderIndicator
        └── SliderThumb

Usage

<Slider defaultValue={65}>
	<SliderControl>
		<SliderTrack>
			<SliderIndicator />
			<SliderThumb aria-label="Loan amount" />
		</SliderTrack>
	</SliderControl>
</Slider>

For a range slider, pass an array value and render two indexed thumbs.

<Slider defaultValue={[25, 75]}>
	<SliderControl>
		<SliderTrack>
			<SliderIndicator />
			<SliderThumb index={0} aria-label="Minimum price" />
			<SliderThumb index={1} aria-label="Maximum price" />
		</SliderTrack>
	</SliderControl>
</Slider>

Examples

Sizes

Use size to scale track height and thumb diameter together.

lg65

md65

sm65

Range

Use range sliders when both ends of an interval are user-controlled.

Price range

25 - 75

Props

Prop/API	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Scales the track and thumb.
`value` / `defaultValue`	`number \| number[]`	Base UI default	Current value. Arrays render range sliders when paired with multiple thumbs.
`min` / `max`	`number`	Base UI default	Slider bounds.
`step`	`number`	Base UI default	Keyboard and drag increment.
`disabled`	`boolean`	`false`	Disables pointer, keyboard, and form interaction.
`children`	`ReactNode`	-	Explicit slider part composition.
native/root props	React component props	-	Passed through to the underlying Base UI slider root.

Accessibility

Provide SliderLabel for visible labels or aria-label for every thumb.
Use SliderValue or adjacent text when users need the current value before submitting.
Pair sliders with a numeric input when precise values matter.
Use Range only when both lower and upper bounds are user-controlled.

On this page