Fader
A linear control whose thumb follows the pointer, like a mixer's volume fader.
Anatomy
import { Fader } from '@addstack/daw-ui/react';
<Fader.Root>
<Fader.Label />
<Fader.Control>
<Fader.Track>
<Fader.Range />
<Fader.Tick value={0} />
<Fader.Thumb />
</Fader.Track>
</Fader.Control>
<Fader.Value />
</Fader.Root>Range, Thumb and Tick are positioned inside Track, and the track's length is the full travel of a drag: the thumb stays under the pointer. Only positioning is set inline; give the track its size and the thumb its looks.
Examples
A volume fader down to silence
scales.decibel is a console fader law: 0 dB sits at about 80% of the travel, and the quiet end gets the bottom quarter. With min={-Infinity}, the bottom of the fader is silence, shown as -∞ dB by formats.decibel().
<Fader.Root min={-Infinity} max={6} defaultValue={0} scale={scales.decibel} format={formats.decibel()} />Zones
The fader above turns red above 0 dB, and so do its +6 mark and its readout. It declares the threshold once, with zones={{ hot: 0 }}, and every part gets data-zone="hot" while the value is above it:
<Fader.Range className="bg-orange-500 data-[zone=hot]:bg-red-500" />See zones.
Horizontal
orientation="horizontal" lays the fader out along the inline axis. In a right-to-left page it fills from the right, and dragging to the left increases it.
<Fader.Root orientation="horizontal" min={-1} max={1} origin={0} />Interaction
The same as the knob, with these differences: a drag moves the thumb with the pointer (the sensitivity is the track's length), and on a horizontal fader the left and right arrow keys follow the reading direction.
API reference
Root
Groups the parts and holds the value. Renders a <div>.
Prop
Type
| Data attribute | |
|---|---|
data-orientation | "vertical" or "horizontal". |
data-dragging | While the value is being dragged. |
data-disabled | When disabled. |
data-bipolar | When origin lies inside the range. |
data-zone | The zone of zones the value is in. |
Every part carries these attributes, except Tick, whose data-zone is the zone of its own value.
| CSS variable | |
|---|---|
--fader-value | Travel of the value, from 0 to 1. |
Control
The focusable element that takes drags, keys and the wheel. Renders a <div> with role="slider" and aria-orientation.
Prop
Type
Label
Names the fader; clicking it focuses the control. Renders a <span>.
Prop
Type
Track
The line the thumb travels along. Renders a <div> with position: relative.
Prop
Type
Range
The filled part of the track, from origin to the value. Renders a <div>, positioned with bottom and height (vertical) or inset-inline-start and width (horizontal).
Prop
Type
Thumb
The handle, centered on the value. Renders a <div>.
Prop
Type
Tick
A mark of the scale, centered on value. Renders a <div> hidden from assistive technology; its children are yours, such as the dB number. Its data-zone is the zone of its own value.
Prop
Type
Value
The formatted value. Renders an <output> with dir="auto".
Prop
Type