Slider

Value selection with glass thumbs that swell into magnifying capsules while held — the track bends through them — then spring back on release. Multiple values render multiple thumbs.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/slider.json

Examples

Default

"use client";

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

export function SliderDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Slider defaultValue={[40]} aria-label="Volume" />
      <Slider defaultValue={[25, 70]} aria-label="Range" />
    </div>
  );
}

API

<Slider />

Prop	Type	Default	Description
value	number[]	—	Controlled values; one thumb per entry.
defaultValue	number[]	[min]	Uncontrolled initial values.
min	number	0	Lower bound.
max	number	100	Upper bound.
step	number	1	Increment.