Slider

A high-quality, styled React slider component built with @base-ui/react for single and range values.

The Slider component allows selecting a numeric value or value range along a continuous track.

Usage

import { Slider } from "@/components/ui/slider";

export function ExampleSlider() {
  return (
    <Slider.Root defaultValue={40}>
      <Slider.Label>Brightness</Slider.Label>
      <Slider.Value />
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb aria-label="Brightness" />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

Preview

Volume Level

Anatomy

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

<Slider.Root>
  <Slider.Label />
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>;

API Reference

Slider.Root Props

Prop	Type	Default	Description
`value`	`number \| number[]`	`undefined`	Controlled value or array of values for range selection.
`defaultValue`	`number \| number[]`	`undefined`	Initial uncontrolled value or value range.
`min`	`number`	`0`	Minimum allowed value on the slider.
`max`	`number`	`100`	Maximum allowed value on the slider.
`step`	`number`	`1`	Step size for value increments.

Slider.Thumb Props

Prop	Type	Default	Description
`index`	`number`	`0`	Zero-based index of the thumb when using range selection.