Slider

A draggable input for a single value or a range.

When to use

Use when: Choosing an approximate value in a range, such as volume.
Avoid when: The exact value matters; use Number Field.

Installation

bunx shelf add slider

The source lands in src/components/ui/slider.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<Slider />

Examples

Range

Pass an array for two thumbs.

Disabled

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.