A vertical or horizontal fader control for adjusting values. Built on audio-ui primitives.
A fader component that supports both vertical and horizontal orientations. Perfect for audio mixing interfaces, volume controls, and parameter adjustments.
Installation
pnpm dlx shadcn@latest add @audio/fader
Usage
import { Fader } from "@/components/audio/fader";<Fader
defaultValue={50}
max={100}
min={0}
step={1}
/>Horizontal Fader
Custom Thumb Marks
No Thumb Marks
API Reference
Fader
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "vertical" | Fader orientation. |
size | "sm" | "default" | "lg" | "default" | Size variant. |
thumbMarks | number | false | 3 | Number of thumb marks to display, or false to hide them. |
className | string | - | Additional CSS classes. |
value | number | - | Controlled value. |
defaultValue | number | - | Uncontrolled default value. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Step increment. |
disabled | boolean | false | Whether the fader is disabled. |
onValueChange | (value: number) => void | - | Callback when value changes during interaction. |
onValueCommit | (value: number) => void | - | Callback when value is committed (on release). |
All other props are inherited from the FaderPrimitive.RootProps from audio-ui.
Examples
Volume Control
Multiple Faders
Notes
Important Information:
- Built on audio-ui: This component is built on top of the
audio-uipackage primitives, providing a high-quality, accessible fader control. - Orientation: The fader supports both vertical and horizontal orientations. The default is vertical, which is common in audio mixing interfaces.
- Thumb Marks: The thumb marks provide visual feedback for the current value. You can customize the number of marks or disable them entirely.
- Size Variants: Three size variants are available:
sm,default, andlg. These affect both the track and thumb dimensions.
Last updated 12/24/2025