Slider

An easily stylable range input.

import * as React from 'react';
import { Slider } from '@base-ui-components/react/slider';
import styles from './index.module.css';

export default function ExampleSlider() {
  return (
    <Slider.Root defaultValue={25}>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Indicator className={styles.Indicator} />
          <Slider.Thumb className={styles.Thumb} />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

import { Slider } from '@base-ui-components/react/slider';

<Slider.Root>
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

API reference

Root

Groups all parts of the slider. Renders a <div> element.

name

string

Name: name
Description: Identifies the field when a form is submitted.
Type: string | undefined

defaultValue

number | number[]

Name: defaultValue
Description: The uncontrolled value of the slider when it’s initially rendered.

To render a controlled slider, use the value prop instead.
Type: number | number[] | undefined

value

number | number[]

Name: value
Description: The value of the slider. For ranged sliders, provide an array with two values.
Type: number | number[] | undefined

onValueChange

function

Name: onValueChange
Description: Callback function that is fired when the slider's value changed.
Type: | (( value: number | number[], eventDetails: Slider.Root.ChangeEventDetails, activeThumbIndex: number, ) => void) | undefined

onValueCommitted

function

Name: onValueCommitted
Description: Callback function that is fired when the pointerup is triggered.
Type: | (( value: number | number[], eventDetails: Slider.Root.ChangeEventDetails, ) => void) | undefined

locale

Intl.LocalesArgument

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.
Type: Intl.LocalesArgument | undefined

ref

RefObject<HTMLDivElement>

Name: ref
Type: React.RefObject<HTMLDivElement> | undefined

step

number

(default:

1

)

Name: step
Description: 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.
Type: number | undefined
Default: 1

largeStep

number

(default:

10

)

Name: largeStep
Description: The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
Type: number | undefined
Default: 10

minStepsBetweenValues

number

(default:

0

)

Name: minStepsBetweenValues
Description: The minimum steps between values in a range slider.
Type: number | undefined
Default: 0

min

number

(default:

0

)

Name: min
Description: The minimum allowed value of the slider. Should not be equal to max.
Type: number | undefined
Default: 0

max

number

(default:

100

)

Name: max
Description: The maximum allowed value of the slider. Should not be equal to min.
Type: number | undefined
Default: 100

format

Intl.NumberFormatOptions

Name: format
Description: Options to format the input value.
Type: Intl.NumberFormatOptions | undefined

disabled

boolean

(default:

false

)

Name: disabled
Description: Whether the slider should ignore user interaction.
Type: boolean | undefined
Default: false

orientation

Orientation

(default:

'horizontal'

)

Name: orientation
Description: The component orientation.
Type: 'horizontal' | 'vertical' | undefined
Default: 'horizontal'

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Slider.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Slider.Root.State, ) => ReactElement)

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-readonly

Present when the slider is readonly.

data-required

Present when the slider is required.

data-valid

Present when the slider is in valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-readonly`	Present when the slider is readonly.
`data-required`	Present when the slider is required.
`data-valid`	Present when the slider is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Value

Displays the current value of the slider as text. Renders an <output> element.

children

| ((formattedValues: string[], values: number[]) => ReactNode) | null

Name: children
Type: | (( formattedValues: string[], values: number[], ) => ReactNode) | null | undefined

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Slider.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Slider.Root.State, ) => ReactElement)

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-readonly

Present when the slider is readonly.

data-required

Present when the slider is required.

data-valid

Present when the slider is in valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-readonly`	Present when the slider is readonly.
`data-required`	Present when the slider is required.
`data-valid`	Present when the slider is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Control

The clickable, interactive part of the slider. Renders a <div> element.

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Slider.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Slider.Root.State, ) => ReactElement)

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-readonly

Present when the slider is readonly.

data-required

Present when the slider is required.

data-valid

Present when the slider is in valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-readonly`	Present when the slider is readonly.
`data-required`	Present when the slider is required.
`data-valid`	Present when the slider is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Track

Contains the slider indicator and represents the entire range of the slider. Renders a <div> element.

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Slider.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Slider.Root.State, ) => ReactElement)

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-readonly

Present when the slider is readonly.

data-required

Present when the slider is required.

data-valid

Present when the slider is in valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-readonly`	Present when the slider is readonly.
`data-required`	Present when the slider is required.
`data-valid`	Present when the slider is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Indicator

Visualizes the current value of the slider. Renders a <div> element.

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Slider.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Slider.Root.State, ) => ReactElement)

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-readonly

Present when the slider is readonly.

data-required

Present when the slider is required.

data-valid

Present when the slider is in valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

Attribute	Description
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-readonly`	Present when the slider is readonly.
`data-required`	Present when the slider is required.
`data-valid`	Present when the slider is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).

Thumb

The draggable part of the the slider at the tip of the indicator. Renders a <div> element and a nested <input type="range">.

getAriaLabel

function

Name: getAriaLabel
Description: A function which returns a string value for the aria-label attribute of the input.
Type: ((index: number) => string) | null | undefined

getAriaValueText

function

Name: getAriaValueText
Description: A function which returns a string value for the aria-valuetext attribute of the input. This is important for screen reader users.
Type: | (( formattedValue: string, value: number, index: number, ) => string) | null | undefined

index

number

Name: index
Description: The index of the thumb which corresponds to the index of its value in the value or defaultValue array. This prop is required to support server-side rendering for range sliders with multiple thumbs.
Type: number | undefined
Example: <Slider.Root value={[10, 20]}> <Slider.Thumb index={0} /> <Slider.Thumb index={1} /> </Slider.Root>

onBlur

function

Name: onBlur
Description: A blur handler forwarded to the input.
Type: | React.FocusEventHandler<HTMLInputElement> | undefined

onFocus

function

Name: onFocus
Description: A focus handler forwarded to the input.
Type: | React.FocusEventHandler<HTMLInputElement> | undefined

tabIndex

number

Name: tabIndex
Description: Optional tab index attribute forwarded to the input.
Type: number | undefined

disabled

boolean

(default:

false

)

Name: disabled
Description: Whether the thumb should ignore user interaction.
Type: boolean | undefined
Default: false

inputRef

Ref<HTMLInputElement>

Name: inputRef
Description: A ref to access the nested input element.
Type: React.Ref<HTMLInputElement> | undefined

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Slider.Thumb.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Slider.Thumb.State, ) => ReactElement)

data-dragging

Present while the user is dragging.

data-orientation

Indicates the orientation of the slider.

data-disabled

Present when the slider is disabled.

data-readonly

Present when the slider is readonly.

data-required

Present when the slider is required.

data-valid

Present when the slider is in valid state (when wrapped in Field.Root).

data-invalid

Present when the slider is in invalid state (when wrapped in Field.Root).

data-dirty

Present when the slider's value has changed (when wrapped in Field.Root).

data-touched

Present when the slider has been touched (when wrapped in Field.Root).

data-focused

Present when the slider is focused (when wrapped in Field.Root).

data-index

Indicates the index of the thumb in range sliders.

Attribute	Description
`data-dragging`	Present while the user is dragging.
`data-orientation`	Indicates the orientation of the slider.
`data-disabled`	Present when the slider is disabled.
`data-readonly`	Present when the slider is readonly.
`data-required`	Present when the slider is required.
`data-valid`	Present when the slider is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the slider is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the slider's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the slider has been touched (when wrapped in Field.Root).
`data-focused`	Present when the slider is focused (when wrapped in Field.Root).
`data-index`	Indicates the index of the thumb in range sliders.

Examples

Range slider

To create a range slider:

Pass an array of values and place Slider.Thumbs for each value in the array
Additionally for server-side rendering, specify a numeric index for each thumb that corresponds to the index of its value in the value array