Slider

A draggable range slider. Supports single values and multi-thumb ranges. Built on Base UI Slider.

Preview

Installation

bash

npx shadcn@latest add @layout/slider

Usage

tsx

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

Examples

Controlled with value display

Volume40%

Range slider

Price range£20 – £80

Disabled

Guidelines for AI agents

Pass a single number for a single thumb or a readonly array for a range. Always set min and max explicitly. Provide an aria-label or associate with a visible label for accessibility. Show the current value nearby for precision inputs.

Never

Neverset step to 0
Neverhardcode the track or range colour; they derive from --layout-muted and --layout-primary
Neverplace a Slider in a narrow container without setting a sensible max-w
Neveromit aria-label on the thumb for screen readers

Tokens consumed

--layout-primary--layout-muted--layout-bg--layout-ring--layout-duration-fast--layout-shadow-sm