Slider

The thumb follows the pointer and the keyboard directly, with no easing to wait for; the filled part of the track shows the value.

Installation

$npx shadcn@latest add @reziui/slider

Usage

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

export function Example() {
  return <Slider defaultValue={[50]} max={100} step={1} aria-label="Volume" />;
}

Values are always arrays, one number per thumb. Name the slider with aria-label or aria-labelledby: it is passed to the thumb, which is the element that receives focus. Show the current value next to the label, as in the preview, when the exact number matters.

Examples

Range

Two values make two thumbs. Name each with thumbLabels, and keep them apart with minStepsBetweenThumbs.

Right-to-left

Radix places the thumb and the filled range from the React direction, not from the dir attribute in the DOM. In a right-to-left app, wrap it in Radix's DirectionProvider (import { Direction } from "radix-ui", then <Direction.Provider dir="rtl">), or pass dir="rtl" to the slider. The fill then grows from the right and the arrow keys follow the reading direction.

Keyboard

API reference