Slider

An easily stylable range input.

Installation


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

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.