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:

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

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

Output

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

Control

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

Track

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

Indicator

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

Thumb

The draggable part of the the slider at the tip of the indicator. Renders a <div> element.