X

Fader

Linear slider control for gain and parameter adjustment with pointer, wheel, keyboard, orientation, and thumb mark variants.

Base UI
import { Fader } from "@/components/audio/elements/fader";

export function FaderVerticalDemo() {

Linear fader for continuous parameters (volume, gain, send level, etc.). The registry component wraps Fader primitives from @audio-ui/react with size variants and thumb mark styling.

Overview

  • Interaction model: Pointer drag on track or thumb, mouse wheel adjustment, keyboard nudging, and commit callbacks on release.
  • Layout: Vertical (default) or horizontal orientation, with sm, default, and lg size presets.
  • Feedback: Filled range + thumb with optional internal marks (thumbMarks).
  • Accessibility: The thumb is exposed as role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax.

Installation

pnpm dlx shadcn@latest add @audio/fader

Usage

import { Fader } from "@/components/audio/fader";

Uncontrolled - initial value only:

<Fader defaultValue={0} max={6} min={-60} step={1} />

Controlled - drive value from state:

const [gain, setGain] = useState(0);
 
<Fader
  max={6}
  min={-60}
  onValueChange={setGain}
  onValueCommit={(value) => console.log("Committed:", value)}
  step={1}
  value={gain}
/>

Interaction

Pointer

BehaviorDetails
Track click / dragClicking or dragging on the track updates the value from pointer position.
Thumb dragDragging the thumb adjusts continuously, clamped to min...max.
Commit eventonValueCommit fires when drag interaction ends.

Keyboard

Focused thumb supports:

KeyAction
ArrowUp / ArrowRightIncrease by step
ArrowDown / ArrowLeftDecrease by step
PageUpIncrease by step × 10
PageDownDecrease by step × 10
HomeSet to min
EndSet to max

Wheel

When focused, wheel input nudges the value by step.

API reference

Fader accepts style props (size, thumbMarks, className) plus primitive props from FaderPrimitive.RootProps.

Value and state

PropTypeDefaultDescription
valuenumber-Controlled value.
defaultValuenumbermidpointUncontrolled initial value. Midpoint is (min + max) / 2.
minnumber-60Minimum value.
maxnumber6Maximum value.
stepnumber1Quantization step for drag, wheel, and keyboard.
disabledbooleanfalseDisables interaction.
onValueChange(value: number) => void-Live updates while adjusting.
onValueCommit(value: number) => void-Fires when interaction is committed.
aria-labelstring-Accessible name for the slider.
aria-labelledbystring-ID of a labeling element.

Layout and visuals

PropTypeDefaultDescription
orientation"horizontal" | "vertical""vertical"Direction of travel.
size"sm" | "default" | "lg""default"Track and thumb size preset.
thumbMarksnumber | false3Number of marks in the thumb or false to hide them.
classNamestring-Root wrapper class name.

Additional valid HTML attributes passed to Fader.Root are forwarded.

Examples

Vertical (default)

import { Fader } from "@/components/audio/elements/fader";

export function FaderVerticalDemo() {

Horizontal

import { Fader } from "@/components/audio/elements/fader";

export function FaderHorizontalDemo() {

Size variants

import { Fader } from "@/components/audio/elements/fader";

export function FaderSizeVariantsDemo() {

Thumb marks variants

import { Fader } from "@/components/audio/elements/fader";

export function FaderThumbMarksVariantsDemo() {

Channel strip

Gain range in dB (-60..+6)

"use client";

import { useId, useState } from "react";

Normalized range (0..100)

"use client";

import { useId, useState } from "react";

Multi-channel strip

"use client";

import { useId, useState } from "react";

More Shadcn Fader components

Browse 4 production-ready audio/ui Fader components for players, mixers, and synth interfaces. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 4 Shadcn Fader components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the audio/ui library.