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>
  );
}

API reference

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>

Root

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

Prop	Type	Default
`name`	`string`	`undefined`
`defaultValue`	`number \| readonly number[]`	`undefined`
`value`	`number \| readonly number[]`	`undefined`
`onValueChange`	`((value: any, event: Event, activeThumbIndex: number) => void)`	`undefined`
`onValueCommitted`	`((value: any, event: Event) => void)`	`undefined`
`ref`	`RefObject<HTMLDivElement>`	`undefined`
`tabIndex`	`number`	`undefined`
`step`	`number`	`1`
`largeStep`	`number`	`10`
`minStepsBetweenValues`	`number`	`0`
`min`	`number`	`0`
`max`	`number`	`100`
`format`	`NumberFormatOptions`	`undefined`
`disabled`	`boolean`	`false`
`orientation`	`Orientation`	`'horizontal'`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

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.

Prop	Type	Default
`aria-live`	`'off' \| 'assertive' \| 'polite'`	`'off'`
`children`	`\| ((formattedValues: string[], values: number[]) => ReactNode) \| null`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

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.

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

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.

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

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.

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

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.

Prop	Type	Default
`aria-label`	`string`	`undefined`
`aria-labelledby`	`string`	`undefined`
`name`	`string`	`undefined`
`active`	`number`	`undefined`
`aria-valuetext`	`string`	`undefined`
`getAriaLabel`	`((index: number) => string) \| null`	`undefined`
`getAriaValueText`	`\| ((formattedValue: string, value: number, index: number) => string) \| null`	`undefined`
`handleInputChange`	`((valueInput: number, index: number, event: KeyboardEvent<Element> \| ChangeEvent<Element>) => void)`	`undefined`
`inputId`	`string`	`undefined`
`onBlur`	`FocusEventHandler<Element>`	`undefined`
`onFocus`	`FocusEventHandler<Element>`	`undefined`
`onKeyDown`	`KeyboardEventHandler<Element>`	`undefined`
`onPointerLeave`	`PointerEventHandler<Element>`	`undefined`
`onPointerOver`	`PointerEventHandler<Element>`	`undefined`
`percentageValues`	`number[]`	`undefined`
`tabIndex`	`number \| null`	`null`
`values`	`number[]`	`undefined`
`step`	`number`	`1`
`largeStep`	`number`	`10`
`minStepsBetweenValues`	`number`	`undefined`
`min`	`number`	`undefined`
`max`	`number`	`undefined`
`format`	`NumberFormatOptions \| null`	`null`
`disabled`	`boolean`	`undefined`
`orientation`	`Orientation`	`'horizontal'`
`id`	`string`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ((props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, inputProps: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, state: State) => ReactElement) \| ReactElement & { ref: Ref<Element> }`	`undefined`

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: