Forms
Slider
Range sliders with value bubbles, ticks and multiple thumbs.
Sliders choose a value or range along a track. Cuelark sliders show a value bubble while you drag or focus a thumb, can label ticks under the track, and support range selection with two thumbs.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/slider.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/slider.
Builds on: motion
Usage
import { Slider } from "@/components/ui/slider";
<Slider defaultValue={[50]} showValue format={(v) => `${v}%`} />API reference
Slider
Extends Radix Slider.Root (value, defaultValue, min, max, step, orientation, onValueChange).
| Prop | Type | Default | Description |
|---|---|---|---|
| showValue | boolean | false | Bubble above active thumbs. |
| format | (v: number) => string | String | Formats bubble and tick labels. |
| ticks | number[] | — | Values to label under the track. |
Accessibility
- Thumbs are role=slider with aria-valuenow; give the slider an aria-label.
- Arrow keys step, Page Up/Down jump, Home/End go to the ends.
FAQ
Also searched as: react slider · range slider · shadcn slider · price range slider · dual range slider