# Fader

Level fader for volume, mixers and lights: a mixing-desk strip that can show a scale and live level meter, or a fill-style tile. Optional set points click with a gentle haptic.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/fader
```

## Import

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

## Variants

- `ambience` — Ambience layers: `npx @lumioui/cli add pro/fader-ambience`
- `dimmer` — Smart-home dimmer: `npx @lumioui/cli add pro/fader-dimmer`
- `mixer` — Sound mixer bank: `npx @lumioui/cli add pro/fader-mixer`
- `video-call` — Video-call volume: `npx @lumioui/cli add pro/fader-video-call`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | — |
| `defaultValue?` | `number` | — |
| `onValueChange?` | `(value: number) => void` | Fires only when the stepped value changes — never per frame. |
| `onSlidingComplete?` | `(value: number) => void` | Fires once when the finger lifts. |
| `min?` | `number` | — |
| `max?` | `number` | — |
| `step?` | `number` | — |
| `detents?` | `number[]` | Values the cap snaps to within ~8pt, with a selection haptic. |
| `orientation?` | `"vertical" | "horizontal"` | — |
| `appearance?` | `"tile" | "channel"` | tile — the tile is the control; channel — groove + cap + meter. Default channel. |
| `length?` | `number` | Main-axis length in pt. Default 208 (tile) / 240 (channel) vertical;  horizontal faders fill their width. |
| `label?` | `string` | — |
| `formatValue?` | `(value: number) => string` | — |
| `showValue?` | `boolean` | — |
| `icon?` | `IconName` | Tile icon / horizontal channel icon. |
| `level?` | `number | SharedValue<number>` | Live input level 0–1 for the meter (number or SharedValue). Omit for no meter. |
| `postFader?` | `boolean` | Meter shows level × fader position (post-fader). Default true. |
| `marks?` | `FaderMark[]` | Channel scale labels (dB marks). |
| `disabled?` | `boolean` | — |
| `progressValue?` | `SharedValue<number>` | Receives the 0–1 position on the UI thread every frame — drive a  room's light or a tint from it without touching React. |
| `className?` | `string` | — |

## Icons rendered

- `sun` — /icons.html?i=sun

Source: https://lumioui.com/components/fader