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

Label

Use the label prop to add a visible label. For sliders without a visible label, use aria-label on each thumb via thumbLabels.

{/* Visible label */}
<Slider label="Volume" defaultValue={[50]} />
 
{/* Invisible label via thumbLabels */}
<Slider thumbLabels={["Volume"]} defaultValue={[50]} />
 
{/* Range slider with labeled thumbs */}
<Slider
  label="Price range"
  thumbLabels={["Minimum price", "Maximum price"]}
  defaultValue={[25, 75]}
/>

Size

Disabled

Range Slider

Vertical Slider

Edge Aligned Thumbs

Use thumbAlignment="edge" to keep the thumb contained inside the track. Useful when the slider is flush against a container edge or inside an overflow: hidden parent.

Cookbook

Custom Slider

Form Integration

See Form Integration for more information.