Slider
Use Slider to adjust a numeric value or range when its relative position matters more than exact typing.
Preview
Price range and vertical volume
Adjust a two-thumb price range starting at 32–72 and compare a vertical single-thumb slider starting at 60.
Installation
New to this Registry? Complete the base setup before continuing.
npx shadcn@latest add @neumorphism-ui/sliderInstall the shared base once, then add components and their dependencies with the CLI.
Usage
Supply values as an array, set min, max, and step, and name each thumb. Use onValueChange to keep a displayed value in sync with interaction.
"use client";
import { Slider } from "@/components/ui/slider";
export default function Example() {
return <Slider defaultValue={[50]} min={0} max={100} aria-label="Volume" thumbLabels={["Volume"]} />;
}API Reference
Built on Base UI Slider with both single-value and number[] range APIs. Creates one thumb per array item, names each input through thumbLabels, and supports horizontal or vertical orientation with controlled or uncontrolled values.
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Slider | value / defaultValue | number | readonly number[] | min | The controlled value or initial uncontrolled value for each thumb. |
Slider | min / max | number | 0 / 100 | The selectable numeric range. |
Slider | step | number | 1 | The increment used for keyboard and pointer adjustment. |
Slider | orientation | "horizontal" | "vertical" | "horizontal" | Sets the track direction and keyboard axis. |
Slider | thumbLabels | readonly string[] | — | Accessible names passed to the actual thumb inputs in value order. |
Slider | onValueChange / onValueCommitted | (value: number | readonly number[]) => void | — | Provides a single number or an array of values while adjustment occurs or when it finishes. |
Slider | disabled | boolean | false | Disables interaction for every thumb. |
Accessibility
- 01
Name the Slider group with aria-label or aria-labelledby, and pass each control-point name to thumbLabels in value order.
- 02
Base UI manages role=slider, current, minimum, and maximum values, plus Arrow, Page, Home, and End key behavior for every thumb.
- 03
Provide one thumbLabels entry for a single value, or distinct names such as minimum and maximum for a range.