A linear slider for gain and other continuous parameters.
Base UI
import { Fader } from "@/components/audio/elements/fader";
const MARKS = [A linear control for continuous parameters such as volume, gain or a send level. The registry component wraps the Fader primitive from @audio-ui/react and adds size variants and thumb marks.
onValueCommitted fires when the interaction ends.sm, default and lg sizes.thumbMarks).<input type="range"> that carries the accessible name (aria-label or aria-labelledby), the value text (formatted with format) and the form value (name).Import the primitive and assemble its parts.
import { Fader } from "@audio-ui/react";
<Fader.Root>
<Fader.Label />
<Fader.Control>
<Fader.Track>
<Fader.Indicator />
</Fader.Track>
<Fader.Mark value={50} />
<Fader.Thumb />
</Fader.Control>
<Fader.Value />
</Fader.Root>import { Fader } from "@/components/audio/fader";Uncontrolled: set only the initial value.
<Fader defaultValue={0} max={6} min={-60} step={1} />Controlled: drive the value from state.
const [gain, setGain] = useState(0);
<Fader
max={6}
min={-60}
onValueChange={setGain}
onValueCommitted={(value, details) => console.log("Committed:", value, details.reason)}
step={1}
value={gain}
/>Behavior · 4
min…max.onValueCommitted fires when an interaction ends with a new value.value updates late; it returns to value on release. Reject a value with eventDetails.cancel().On the focused thumb:
Keys · 6
stepsteplargeStep (default 10)largeStep (default 10)minmaxThe mouse wheel over the fader moves the value by step and reports eventDetails.reason === "wheel".
Groups all parts of the fader, with audio defaults (vertical, -60…+6) and mouse-wheel stepping. While a pointer drags it, the thumb follows the pointer even if a controlled value lags behind, as with a seek bar driven by playback time or automation. To reject a value, call eventDetails.cancel(). Renders a <div> element.
Props · 8
Indicator fills from, such as 0 on a -1…1 pan. Defaults to min.min…max.Data attributes · 2
data-activedata-disabledThe interactive area: pointer presses and drags, plus mouse-wheel stepping. Sets touch-action: none so touch drags don't scroll the page. Renders a <div> element.
Data attributes · 2
data-activedata-disabledThe filled part of the track: from min up to the value, or between the Root's anchor and the value, on whichever side of it the value is. Renders a <div> element.
Data attributes · 2
data-activedata-disabledA graduation along the track at value: placed from the start of the travel in the fader's direction, where the thumb's center would be at that value. It carries data-active while the value has reached it from the anchor, and data-orientation. Decorative: the thumb's input announces the value. Render your own tick and label inside it. Renders a <div> element.
Props · 1
min and max.Data attributes · 2
data-activedata-disabledFader accepts style props (size, thumbMarks, className) plus primitive props from FaderPrimitive.Root.Props (name, form, format, locale, largeStep, render, …). The primitive's Fader.Mark places a graduation at a value along the track, with data-active once the value has reached it, to build your own ruler. aria-label, aria-labelledby, and aria-describedby are forwarded to the thumb's input.
Props · 15
(min + max) / 2.anchor light up.auto while hovered, dragged or focused from the keyboard."-6.0 dB".reason: "input-change").0 on a -1…1 pan: the fill runs from the anchor to the value, on whichever side it is.eventDetails.reason is "drag", "track-press", "keyboard", "wheel", "input-change", or "none"; call eventDetails.cancel() to reject the change.Props · 4
false to hide them.Additional valid HTML attributes passed to Fader.Root are forwarded.
Base UI
import { Fader } from "@/components/audio/elements/fader";
const MARKS = [Base UI
import { Fader } from "@/components/audio/elements/fader";
const MARKS = [anchor={0} makes the fill grow from the center of a -1…1 range, left or right of it.
Base UI
"use client";
import { useState } from "react";Browse 3 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 3 Shadcn Fader components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the audio/ui library.