<audio-ui-fader> is the root of a linear control, with audio defaults: vertical, from -60 to +6. It has role="group", labelled by its label part.
Usage
The styles read the theme's CSS variables, which Styling sets.
<style>
audio-ui-fader {
position: relative;
height: calc(var(--spacing, 0.25rem) * 40);
}
audio-ui-fader-control {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: auto;
height: 100%;
touch-action: none;
user-select: none;
}
audio-ui-fader-track {
position: relative;
flex-grow: 1;
width: calc(var(--spacing, 0.25rem) * 2);
overflow: hidden;
border-radius: 9999px;
background: color-mix(in oklab, var(--input, oklch(0.922 0 0)) 90%, transparent);
cursor: pointer;
user-select: none;
}
audio-ui-fader-indicator {
position: absolute;
width: 100%;
background: var(--primary, oklch(0.205 0 0));
user-select: none;
}
audio-ui-fader-thumb {
position: absolute;
z-index: 10;
display: block;
flex-shrink: 0;
width: calc(var(--spacing, 0.25rem) * 4);
height: calc(var(--spacing, 0.25rem) * 6);
border: 1px solid var(--ring, oklch(0.708 0 0));
border-radius: calc(var(--radius, 0.625rem) - 2px);
background: var(--card, oklch(1 0 0));
outline: none;
cursor: grab;
user-select: none;
transition: box-shadow 150ms;
}
audio-ui-fader-thumb:hover {
box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring, oklch(0.708 0 0)) 40%, transparent);
}
audio-ui-fader-thumb:has(:focus-visible),
audio-ui-fader-thumb:active {
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring, oklch(0.708 0 0)) 50%, transparent);
}
audio-ui-fader-thumb:active {
cursor: grabbing;
}
</style>
<audio-ui-fader value="-6">
<audio-ui-fader-control>
<audio-ui-fader-track>
<audio-ui-fader-indicator></audio-ui-fader-indicator>
</audio-ui-fader-track>
<audio-ui-fader-thumb aria-label="Volume"></audio-ui-fader-thumb>
</audio-ui-fader-control>
</audio-ui-fader>
<script type="module">
import "@audio-ui/elements/fader";
const fader = document.querySelector("audio-ui-fader");
fader.addEventListener("input", (event) =>
console.log(event.detail.value)
);
</script>API reference
pnpm add @audio-ui/elements
import "@audio-ui/elements/fader";| Export | Kind | What it is |
|---|---|---|
FADER_TAGS | const | The names the fader's elements are registered under, frozen: a page cannot rename them by accident. |
FaderChangeEvent | type | Fired once a gesture ends with a new value. |
FaderControlElement | class | The interactive area. |
FaderElement | class | The root of a linear control, with audio defaults: vertical, from -60 to +6. |
FaderElementEventMap | interface | The events a fader fires, as addEventListener types them. |
FaderEventDetail | interface | What a fader's input and change events carry, besides the fader itself as their target. |
FaderIndicatorElement | class | The filled range of the track, from min to the value, or between anchor and the value. |
FaderInputEvent | type | Fired on every change. |
FaderLabelElement | class | The accessible label. |
FaderThumbElement | class | The draggable thumb, positioned at the value. |
FaderTrackElement | class | The full range of travel, containing the indicator and the thumb. |
FaderValueElement | class | Renders the value, formatted with the fader's format and locale. |
Props · 12
Step for Page Up, Page Down and Shift + Arrow keys.
The current value. Mirrored by the
value property.The initial value, restored by a double click, Alt + click or Delete. Defaults to the midpoint.
The value the indicator fills from, such as
0 on a -1 to 1 pan. Defaults to min.Intl.NumberFormat options as JSON, for the value part and aria-valuetext.Defaults to the browser locale.
The form field name.
| Part | Description |
|---|---|
<audio-ui-fader-control> | The interactive area. A press on the track jumps to the pointer; a press on the thumb drags from where it was grabbed; the wheel steps |
<audio-ui-fader-track> | The full range of travel |
<audio-ui-fader-indicator> | The filled range, from min or anchor to the value |
<audio-ui-fader-thumb> | The draggable thumb, positioned at the value, containing the native range input |
<audio-ui-fader-value> | The formatted value |
<audio-ui-fader-label> | Labels the group, and the input when the thumb has no accessible name |
The same control in React, and its parts' props: Fader.