Fader

This is a fork of audiocn's Fader (MIT). Its behaviour, parts and props are upstream's; only the paint differs:

• The range is chrome-fill, not bg-primary.
• The default thumb is a chrome-bead on the knob's hairline rim (ring-knob-ring), like every Videorc slider.
• The console thumb's cap is rounded-chip, and the value, its editor and Reset sit on rounded-row.

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/fader

The fader builds on audiocn's core (@audiocn/core, @audiocn/use-audio-config and @audiocn/db-scale), so add the @audiocn namespace to components.json as well:

{
  "registries": {
    "@videorc": "https://ui.videorc.com/r/{name}.json",
    "@audiocn": "https://audiocn.dev/r/{name}.json"
  }
}

UsageCopy Anchor Link

import {
  Fader,
  FaderLabel,
  FaderRange,
  FaderThumb,
  FaderTrack,
  FaderValue,
} from "@/components/ui/fader";

const [volumeDb, setVolumeDb] = useState(0);

<Fader onValueChange={setVolumeDb} value={volumeDb}>
  <FaderLabel>Microphone</FaderLabel>
  <FaderValue />
  <FaderTrack>
    <FaderRange />
    <FaderThumb />
  </FaderTrack>
</Fader>;

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

AnatomyCopy Anchor Link

<Fader>
  <FaderLabel />
  <FaderReset />
  <FaderValue />
  <FaderTrack>
    <FaderRange />
    <FaderThumb />
  </FaderTrack>
  <FaderScale />
</Fader>

FaderTrack takes any children, so a level meter can sit inside it.

ExamplesCopy Anchor Link

Bipolar gainCopy Anchor Link

Videorc's Gain faders: origin={0} grows the fill from the middle, whole-dB steps, a detent at 0 dB and a value you can type into.

Console fadersCopy Anchor Link

Vertical faders with variant="console" and taper="audio", which gives more travel around 0 dB, like a mixing console.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

Holding Alt while dragging uses fineStep too.

AccessibilityCopy Anchor Link

The thumb holds a native range input with role="slider", and its aria-valuetext is the formatted value, such as "−6.0 dB" or "Silent". Name the fader with FaderLabel or aria-label. The editable value's input is named "Value in dB".

API referenceCopy Anchor Link

FaderCopy Anchor Link

Every Base UI Slider root prop, plus:

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 audiocn's DbScale props. The range, taper and orientation come from the fader.