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

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[]

value

number | number[]

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

onValueChange

function

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

onValueCommitted

function

Name: onValueCommitted
Description: Callback function that is fired when the pointerup is triggered.
Type: ((value: number | number[], event: Event) => void)

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

ref

RefObject<HTMLDivElement>

Name: ref
Type: RefObject<HTMLDivElement>

tabIndex

number

Name: tabIndex
Description: Optional tab index attribute for the thumb components.
Type: number

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
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
Default: 10

minStepsBetweenValues

number

(default:

0

)

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

min

number

(default:

0

)

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

max

number

(default:

100

)

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

format

Intl.NumberFormatOptions

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

disabled

boolean

(default:

false

)

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

orientation

Orientation

(default:

'horizontal'

)

Name: orientation
Description: The component orientation.
Type: Orientation
Default: 'horizontal'

inputRef

Ref<HTMLInputElement>

Name: inputRef
Description: A ref to access the hidden input element.
Type: Ref<HTMLInputElement>

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

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.

getAriaLabel

function

Name: getAriaLabel
Description: Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb
Type: ((index: number) => string) | null

getAriaValueText

function

Name: getAriaValueText
Description: 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.
Type: | ((formattedValue: string, value: number, index: number) => string) | null

disabled

boolean

(default:

false

)

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

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: | ((props: ComponentPropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, inputProps: ComponentPropsWithRef<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, state: Slider.Thumb.State) => ReactElement) | ReactElement & { ref: Ref<Element> }

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, provide an array of values with corresponding thumbs: