Slider

An input where the user selects a value from within a given range. Built on Base UI Slider primitives.

Value50%

Usage

import {
  SliderRoot,
  SliderControl,
  SliderTrack,
  SliderIndicator,
  SliderThumb,
} from "@/components/ui/static/slider"

<SliderRoot value={value} onValueChange={setValue}>
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
      <SliderThumb />
    </SliderTrack>
  </SliderControl>
</SliderRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react

Examples

Volume Control

🔈

🔊75%

Price Range

Price Range$25 - $75

API Reference

valuenumber[]

The controlled value of the slider.

defaultValuenumber[]

The default value when uncontrolled.

onValueChange(value: number[]) => void

Callback when the value changes.

minnumber

=0

Minimum value.

maxnumber

=100

Maximum value.

stepnumber

=1

Step increment.

disabledboolean

=false

Whether the slider is disabled.