# Fader

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

```bash
npm install @audio-ui/react
```

```ts
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.

```tsx
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.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `anchor` | `number` |  | Value the `Indicator` fills from, such as `0` on a -1…1 pan. Defaults to `min`. |
| `defaultValue` | `number` |  | Uncontrolled starting value, and what a double click, an Alt + click or the Delete key return to; defaults to the midpoint of `min…max`. |
| `max` | `number` | `6` |  |
| `min` | `number` | `-60` |  |
| `onValueChange` | `(value: number, eventDetails: ChangeEventDetails) => void` |  | Fires on drag, track press, keyboard, wheel and form input changes. |
| `onValueCommitted` | `(value: number, eventDetails: CommitEventDetails) => void` |  | Fires when an interaction ends with a new value. |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` |  |
| `value` | `number` |  |  |

**Data attributes**

| Attribute | Description |
| --- | --- |
| `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**

| Attribute | Description |
| --- | --- |
| `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**

| Attribute | Description |
| --- | --- |
| `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.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` |  | Where the mark sits, between `min` and `max`. |

**Data attributes**

| Attribute | Description |
| --- | --- |
| `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](/docs/components/base/fader).