Fader

The headless Fader of @audio-ui/react: its parts, what each renders and owns, and their props.


pnpm add @audio-ui/react

import { Fader } from "@audio-ui/react/fader";

Export	Kind	What it is
`Fader.Control`	function	The interactive area: a press on the track jumps to the value under it, a press on the thumb drags it from where it was taken, plus mouse-wheel stepping.
`Fader.Indicator`	function	The 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.
`Fader.Label`	function	Accessible label, associated with the thumb.
`Fader.Mark`	function	A 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.
`Fader.Root`	function	Groups all parts of the fader, with audio defaults (vertical, -60…+6) and mouse-wheel stepping.
`Fader.Thumb`	function	The draggable thumb, with a nested `<input type="range">` that carries the accessible name (`aria-label`/`aria-labelledby`) and form value.
`Fader.Track`	function	The full range of travel.
`Fader.Value`	function	The formatted value (`format`/`locale` on Root).

Anatomy

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>

API reference

Root

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

Data attributes · 2

data-active

Whether the value has reached this mark from the anchor.

data-disabled

Present when disabled.

Control

The 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-active

Whether the value has reached this mark from the anchor.

data-disabled

Present when disabled.

Indicator

The 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-active

Whether the value has reached this mark from the anchor.

data-disabled

Present when disabled.

Mark

A 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

Data attributes · 2

data-active

Whether the value has reached this mark from the anchor.

data-disabled

Present when disabled.

Styled

The registry's styled Fader, its usage and interaction: Fader.

Knob XYPad

Built by Ouest Labs, the source code is available on GitHub.

RSS