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
`aria-labelledby`	`string`	`undefined`
`name`	`string`	`undefined`
`defaultValue`	`Array<number> \| number`	`undefined`
`value`	`Array<number> \| number`	`undefined`
`onValueChange`	`(value, event, activeThumbIndex) => void`	`undefined`
`onValueCommitted`	`(value, event) => void`	`undefined`
`step`	`number`	`1`
`largeStep`	`number`	`10`
`minStepsBetweenValues`	`number`	`0`
`min`	`number`	`0`
`max`	`number`	`100`
`format`	`Intl.NumberFormatOptions`	`undefined`
`disabled`	`boolean`	`false`
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.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).

Value

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

Prop	Type	Default
`children`	`\| React.ReactNode \| (formattedValue, value) => React.ReactNode`	`undefined`
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.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).

Control

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

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.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).

Track

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

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.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).

Indicator

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

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.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).

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-valuetext`	`string`	`undefined`
`getAriaLabel`	`function(index: number) => string`	`undefined`
`getAriaValueText`	`function(formattedValue: string, value: number, index: number) => string`	`undefined`
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.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).