Slider - Stera UI

Installation

pnpm dlx stera-ui add slider

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

<Slider defaultValue={[50]} max={100} step={1} className="w-80" />

Pass two values in defaultValue to create a range slider with two thumbs.

<Slider defaultValue={[25, 75]} max={100} step={5} className="w-80" />

<Slider
  defaultValue={[50]}
  max={100}
  orientation="vertical"
  className="h-40"
/>

<Slider defaultValue={[50]} max={100} disabled className="w-80" />

Built on Base UI's Slider primitive.