Duck Slider
The waterline: the filled track is water, the thumb floats on it, and letting go leaves a wake.
InputsClient component
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-sliderPulls in @duck/theme. Already installed items are skipped.
Usage
import { DuckSlider } from "@/components/ui/duck-slider"The file lands in components/ui/duck-slider.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | 0 | Controlled or uncontrolled. min, max and step pass straight through. |
| formatValue | (value: number) => string | - | Feeds aria-valuetext. Without it a screen reader reads a bare integer, which is useless for anything but a percentage. |
| showValue | boolean | false | Print the formatted value above the track, in tabular figures. |
Rules
What keeps this component from turning into noise.
- No holo variant, on purpose. Settings pages have six sliders and the viewport has one holo budget.
- Single value. A two-thumb range is a different control — do not fake it with two of these.
- Pass formatValue whenever the number is not self-explanatory.