Preview

Installation

Usage

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={40} />

API Reference

Slider

Root component. Styled wrapper for Slider.Root from Base UI. Automatically detects range mode when value or defaultValue is an array.

Examples

For accessible labelling and validation, prefer using the Field component to wrap sliders. See the related example: Slider field.

Range

Vertical

Slider with Label and Value