# Waveform

Audio scrubber that shows playback as a filling waveform. Bars near the playhead grow and brighten as you drag, and chapter marks appear as small gaps in the wave.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

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

## Import

```tsx
import { Waveform } from "@/components/ui/waveform/waveform";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | Controlled position (min..max). Omit for uncontrolled via defaultValue,  or pass `value` alone for a static progress display. |
| `defaultValue?` | `number` | Uncontrolled initial position. |
| `onValueChange?` | `(value: number) => void` | Fires while scrubbing — only when the stepped value changes, never per  touch-move frame. |
| `onSlidingComplete?` | `(value: number) => void` | Fires once when the finger lifts, with the settled value (seek here). |
| `onSlidingStart?` | `() => void` | Fires when a scrub starts — pause time updates while it runs. |
| `min?` | `number` | — |
| `max?` | `number` | — |
| `step?` | `number` | Granularity of emitted values. Default 1. |
| `bars?` | `number` | Bar count. Default 44. |
| `scrubbable?` | `boolean` | Tap/drag to scrub. Default true — set false for a purely visual  progress read-out. |
| `playing?` | `boolean` | Playback is running: the head carries a gentle halo and advances linearly across each `updateInterval` instead of stepping. Pausing dims the halo in 120ms. Default false (the head glides to each new value). |
| `updateInterval?` | `number` | How often `value` updates during playback, in ms. Default 1000. |
| `marks?` | `number[]` | Chapter / phrase boundaries (values in min..max). Each becomes a gap in  the bars with a dot that switches on once it is played. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | Extra classes on the outer container (height, width). |
| `barClassName?` | `string` | Extra classes on every bar. |
| `fillClassName?` | `string` | Filled (played) portion color. Default `bg-foreground`. |
| `trackClassName?` | `string` | Unfilled portion color. Default `bg-foreground/25`. |

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