Slider

Picks a value, or a range with two thumbs, along a track. Keyboard steps with the arrows, large steps with Page Up and Down.

Installation

npx rasengan-ui add slider

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/slider.json

Usage

import { Slider } from "@/components/ui/slider";
 
export function Volume() {
  return <Slider defaultValue={40} aria-label="Volume" className="w-64" />;
}

Range

Pass an array to get one thumb per value. minStepsBetweenValues keeps the thumbs apart.

<Slider defaultValue={[20, 80]} step={5} aria-label="Price range" />

Tones

tone colours the range and the thumb's ring: primary by default. The ring takes the tone's edge, 3:1 on the page even for warning.

Sizes

sm, default and lg set the track's thickness and the thumb, at the village's indicator sizes.

Villages

The track and range follow --track-border and the nature's primary; the thumb has no shadow in Iwa.

Accessibility

• Each thumb is a slider with aria-valuenow; aria-label on the Slider names every thumb.
• Arrow keys move by step, Page Up and Page Down by largeStep, Home and End to the ends.

API reference

The props of Base UI's Slider root (value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, minStepsBetweenValues, orientation, disabled…), plus tone ("neutral" \| "primary" \| "success" \| "warning" \| "info" \| "destructive", default "primary"), size ("sm" \| "default" \| "lg") and className. Its track, range and thumbs are drawn for you; sliderVariants({ tone, size }) returns the root's classes.