Slider - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/slider

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Slider defaultValue={[50]} max={100} step={1} />

API Reference

Prop	Type	Default	Description
`value`	`number[]`	—	The controlled value.
`defaultValue`	`number[]`	—	The default value.
`max`	`number`	`100`	Maximum value.
`min`	`number`	`0`	Minimum value.
`step`	`number`	`1`	Step increment.