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 place its parts the following way:

Anatomy

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

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

Root

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

Output

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Control

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Track

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Indicator

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Thumb

Prop	Type	Default
`aria-label`	`string`	`undefined`
`aria-valuetext`	`string`	`undefined`
`className`	`string \| (state) => string`	`undefined`
`getAriaLabel`	`function(index: number) => string`	`undefined`
`getAriaValueText`	`function(value: number, index: number) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`