Shape one channel
Dialogue mix
Controls update the local channel state in this example.
Channel strip
Edits channel gain, pan, mute, and solo with native sliders and 44px toggle actions wired to caller-owned state.
Preview
In action
When to use
Use it for
- A host channel whose gain, pan, mute, and solo states belong together.
- value/defaultValue/onValueChange for controlled or local editing; connect changes to your audio host.
- Pan from -100 percent left through zero center to 100 percent right; gain uses decibels.
Not for
- Assuming UI changes process audio without a connected host.
- Using solo as a global mixing policy; the application coordinates other channels.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { ChannelStrip } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/channel-strip.
2. Vendor the source
npx @noorddev/vlak-cli add channel-strip
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/channel-strip.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { ChannelStrip } from "@noorddev/vlak-react";
<ChannelStrip label="Dialogue" name="dialogue" defaultValue={{ gain: -3, pan: 0, muted: false, solo: false }} />Props
ChannelStrip
Gain, pan, mute and solo state for an application-owned audio channel.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | ||
value | ChannelStripValue | ||
defaultValue | ChannelStripValue | initial | |
onValueChange | (value: ChannelStripValue) => void | ||
gainMin | number | -60 | |
gainMax | number | 12 | |
readOnly | boolean |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves through enabled gain, pan, mute, and solo controls. |
| Arrow keys, Home, End | Uses native slider stepping and bounds. |
| Enter, Space | Toggles the focused mute or solo action. |
Accessibility
- A fieldset and legend name the channel; native sliders expose gain and pan bounds and descriptive value text. In-range values retain their supplied precision.
- Vlak Button supplies mute and solo actions with stable names and aria-pressed; their entire surface changes on selection.
- All controls meet the 44px target size. Disabled or read-only controls cannot edit the channel.
- Uncontrolled form reset restores the supplied default; named read-only channels retain all valid values in form submissions. Disabled channels and out-of-range sliders are omitted. The ref reaches the fieldset.
Markup
<fieldset class="rs-channel-strip"><legend class="rs-channel-strip-label">Dialogue</legend><label class="rs-channel-strip-field">Gain<input class="rs-channel-strip-range" type="range" min="-60" max="12" step="any" value="0" /></label><label class="rs-channel-strip-field">Pan<input class="rs-channel-strip-range" type="range" min="-100" max="100" step="any" value="0" /></label><div class="rs-channel-strip-actions"><button class="rs-btn-ghost rs-btn-sm rs-channel-strip-button" type="button" aria-pressed="false">Mute</button><button class="rs-btn-ghost rs-btn-sm rs-channel-strip-button" type="button" aria-pressed="false">Solo</button></div></fieldset>
Classes
.rs-channel-strip.rs-channel-strip-label.rs-channel-strip-field.rs-channel-strip-text.rs-channel-strip-range.rs-channel-strip-actions.rs-channel-strip-button.rs-channel-strip-pressed