Fader

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/fader

UsageCopy Anchor Link

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

const [gainDb, setGainDb] = useState(0);

<Fader aria-label="Microphone" value={gainDb} onValueChange={setGainDb} />;

The value is always in dB. The taper decides where each dB value sits on the travel. The thumb snaps to 0 dB while dragging, and double-clicking it resets.

AnatomyCopy Anchor Link

<Fader value={db} onValueChange={setDb}>
  <FaderLabel>Microphone</FaderLabel>
  <FaderReset />
  <FaderValue editable />
  <FaderTrack>
    <FaderRange />
    <FaderThumb />
  </FaderTrack>
  <FaderScale />
</Fader>

FaderTrack accepts any children, so a LevelMeter can sit inside it.

ExamplesCopy Anchor Link

Console fadersCopy Anchor Link

taper="audio" gives more travel around 0 dB, like a mixing console.

Bipolar gainCopy Anchor Link

Set origin={0} so the fill grows from the middle.

Silence at the bottomCopy Anchor Link

With silenceAtMin, the lowest position reports -Infinity.

With a meter in the trackCopy Anchor Link

SizesCopy Anchor Link

KeyboardCopy Anchor Link

Holding Alt while dragging uses fineStep resolution.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The thumb is a slider whose aria-valuetext is the formatted value, such as "−6.0 dB" or "Silent". Give the fader a name with FaderLabel or aria-label.

API referenceCopy Anchor Link

FaderCopy Anchor Link

FaderValueCopy Anchor Link

The value is as wide as the longest text the fader's range can show, and right-aligned, so moving the fader never shifts the layout. The editor opens at the same width.

FaderScaleCopy Anchor Link

Takes DbScale props. The range, taper and orientation come from the fader.