Slider

The Slider component provides users with an input for a one or more numerical values within a given range.

SliderControl API

Import

import * as Slider from '@base_ui/react/Slider';
const SliderControl = Slider.Control;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use SliderControl to change the default props of this component with the theme.

SliderIndicator API

Import

import * as Slider from '@base_ui/react/Slider';
const SliderIndicator = Slider.Indicator;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use SliderIndicator to change the default props of this component with the theme.

SliderOutput API

Import

import * as Slider from '@base_ui/react/Slider';
const SliderOutput = Slider.Output;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use SliderOutput to change the default props of this component with the theme.

SliderRoot API

Import

import * as Slider from '@base_ui/react/Slider';
const SliderRoot = Slider.Root;

Props

Props of the native component are also available.

Name	Type	Default	Description
aria-labelledby	string	-	The id of the element containing a label for the slider.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
defaultValue	Array<number> \| number	-	The default value of the slider. Use when the component is not controlled.
direction	'ltr' \| 'rtl'	'ltr'	Sets the direction. For right-to-left languages, the lowest value is on the right-hand side.
disabled	bool	false	If `true`, the component is disabled.
id	string	-	The id of the slider element.
largeStep	number	10	The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
max	number	100	The maximum allowed value of the slider. Should not be equal to min.
min	number	0	The minimum allowed value of the slider. Should not be equal to max.
minStepsBetweenValues	number	0	The minimum steps between values in a range slider.
name	string	-	Name attribute of the hidden `input` element.
onValueChange	func	-	Callback function that is fired when the slider's value changed. Signature:`function(value: number \| Array, activeThumb: number, event: Event) => void` `value` The new value. `activeThumb` Index of the currently moved thumb. `event` The event source of the callback. You can pull out the new value by accessing `event.target.value` (any). Warning: This is a generic event not a change event.
onValueCommitted	func	-	Callback function that is fired when the `pointerup` is triggered. Signature:`function(value: number \| Array, event: Event) => void` `value` The new value. `event` The event source of the callback. Warning: This is a generic event not a change event.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation.
render	element \| func	-	A function to customize rendering of the component.
step	number	1	The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
tabIndex	number	-	Tab index attribute of the Thumb component's `input` element.
value	Array<number> \| number	-	The value of the slider. For ranged sliders, provide an array with two values.

The ref is forwarded to the root element.

Theme default props

You can use SliderRoot to change the default props of this component with the theme.

SliderThumb API

Import

import * as Slider from '@base_ui/react/Slider';
const SliderThumb = Slider.Thumb;

Props

Props of the native component are also available.

Name	Type	Description
aria-label	string	The label for the input element.
aria-valuetext	string	A string value that provides a user-friendly name for the current value of the slider.
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
getAriaLabel	func	Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb Signature:`function(index: number) => string` `index` The index of the input
getAriaValueText	func	Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users. Signature:`function(value: number, index: number) => string` `value` The thumb label's value to format. `index` The thumb label's index to format.
render	func \| node	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use SliderThumb to change the default props of this component with the theme.

SliderTrack API

Import

import * as Slider from '@base_ui/react/Slider';
const SliderTrack = Slider.Track;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use SliderTrack to change the default props of this component with the theme.