Slider Component

A range input component for selecting numeric values. Built on Radix UI for full accessibility and keyboard support.

Basic Slider

A simple slider with a label.

50%

Sizes

Different slider sizes for various contexts.

Colors

Accent colors from the Catppuccin palette.

Real-world Examples

Common slider patterns used in applications.

Audio Controls

Adjust volume and playback settings

50%
22°C
80%

Installation

npx shadcn@latest add https://catppuccin-components.vercel.app/r/slider.json