Slider

An easily stylable range input.

Installation


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

Basic Usage

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

<Slider />

Anatomy

 <Slider />

Features

Range Slider

Vertical Slider

Edge Aligned Thumbs

Note

By default, the slider thumb is centered on the value. This means at 0% and 100%, half of the thumb hangs outside the track's bounds.

Use thumbAlignment="edge" to keep the entire thumb contained inside the track boundaries. This is useful when:

The slider is flush against a screen edge or container wall.
The parent container has overflow: hidden (which would otherwise clip half the thumb).

Mode	Visual Behavior
`center` (Default)	The center of the thumb aligns with the start/end. The thumb overflows the track by 50% of its width.
`edge`	The outer edge of the thumb aligns with the start/end. The thumb stays 100% inside the track.

Warning

Form controls must have an accessible name. Prefer using <Field> to provide a visible text label and description, or use the aria-label attribute as an alternative.

Recipes

Custom Slider

Integration with Form

See Form Integration for more information.