# Fader

A console fader with a live meter: drag the cap, click the track to jump, and watch the level fall away beside it with a held peak.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/fader
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Controls.tsx

## Usage

```tsx
"use client";

import { Fader } from "mizu-ui";

export function Example() {
  return (
    <Fader
      label="Master"
      min={0}
      max={1}
      step={0.01}
      defaultValue={0.8}
      marks={[1, 0.5, 0]}
      level={0.62}
      format={(v) => `${Math.round(v * 100)}%`}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/fader
```

## Props

- `label / value / defaultValue / onValueChange / onValueCommit`: `string / number`. As for Knob.
- `level`: `number | MotionValue<number>`. A live signal from 0 to 1 for the meter; pass a motion value to update it without re-rendering.
- `marks / height`: `number[] / number`. Values labelled beside the track; track height (176).
- `min / max / step / taper / format / resetValue`: `number / linear | log / (value) => string`. As for Knob.
- `name / disabled`: `string / boolean`. Submit with a form; switch off.

## Keyboard

- ↑ ↓: Step up or down
- Shift+arrows PageUp PageDown: A tenth of the range
- Home End: Minimum or maximum
- Backspace Delete: Return home

## Accessibility

Behind the drawing is a native range input: it takes focus, answers the arrow, Page, Home and End keys, reads its value as formatted text, and submits with a form when named. Shift steps by a tenth of the range, Backspace or Delete returns home, and focus shows in the accent.

## Motion

The cap glides to track clicks and resets and follows the hand while dragged. The meter attacks instantly and releases steadily; its peak holds for a moment, then falls. Reduced motion jumps the cap.