Fader

A volume fader in decibels, with tapers, detents, a scale, reset and an editable value.

3 min read · 572 words

Microphone

−6.0 dB

Installation

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/fader.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/fader.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/fader.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/fader.json

Usage

<script lang="ts">
	import { Fader } from "#lib/components/ui/fader/index.js";

	let gainDb = $state(0);
</script>

<Fader aria-label="Microphone" bind:value={gainDb} />

The value is always in dB. The taper decides where each dB value sits on the travel. The thumb snaps to 0 dB while dragging, and double-clicking it resets.

Anatomy

<Fader bind:value={db}>
	<FaderLabel>Microphone</FaderLabel>
	<FaderReset />
	<FaderValue editable />
	<FaderTrack>
		<FaderRange />
		<FaderThumb />
	</FaderTrack>
	<FaderScale />
</Fader>

FaderTrack accepts any children, so a LevelMeter can sit inside it.

Examples

Console faders

taper="audio" gives more travel around 0 dB, like a mixing console.

0.0 dB

Mic

−18.0 dB

Music

−12.0 dB

Game

Bipolar gain

Set origin={0} so the fill grows from the middle.

Input gain

Silence at the bottom

With silenceAtMin, the lowest position reports -Infinity.

Output

−10.0 dB

With a meter in the track

This preview passes the fader value to useDemoSignal({ gainDb }), so the meter shows the level after gain.

0.0 dB

Sizes

Keyboard

Key	Action
Arrow keys	Change by `step` (0.5 dB)
Shift + arrow, Page Up / Page Down	Change by `largeStep` (6 dB)
Alt + arrow	Change by `fineStep` (0.1 dB)
Home / End	Minimum (or silence) / maximum

Holding Alt while dragging uses fineStep resolution.

Theming

Variable or attribute	Meaning
`--fader-track-size`, `--fader-thumb-size`	Set by `size`
`data-orientation`, `data-variant`, `data-size`	Current settings
`data-dragging`	The thumb is held
`data-at-detent`	The value sits on a detent
`data-silent`	The value is `-Infinity`
`data-disabled`	Disabled

Accessibility

The thumb is a slider whose aria-valuetext is the formatted value, such as "−6.0 dB" or "Silent". Give the fader a name with FaderLabel or aria-label.

API reference

Fader

Prop	Type	Default
`value` The value in dB. Bindable.	`number`	`resetValue`
`onValueChange` details.reason: drag, track-press, keyboard, wheel, reset or input.	`(value, details) => void`	—
`onValueCommit` Fires when a drag ends, after keyboard input and on reset.	`(value) => void`	—
`min`	`number`	`-60`
`max`	`number`	`6`
`step` Arrow keys and drag resolution.	`number`	`0.5`
`largeStep` Shift+arrow, Page Up and Page Down.	`number`	`6`
`fineStep` Alt+arrow and Alt+drag.	`number`	`0.1`
`resetValue` Restored by double-click and FaderReset.	`number`	`0`
`taper` Position law.	`"linear" \| "audio" \| Taper`	`"linear"`
`origin` Where the range fill starts.	`number`	`min`
`detents` Values the thumb snaps to while dragging.	`number[]`	`[0]`
`silenceAtMin` The lowest position reports -Infinity.	`boolean`	`false`
`allowWheel` The wheel adjusts the value while focused.	`boolean`	`false`
`orientation` Inherited from a channel strip.	`"horizontal" \| "vertical"`	`"horizontal"`
`variant` console has a wide cap thumb.	`"default" \| "console"`	`"default"`
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`format` Used by FaderValue and assistive technology.	`(db: number) => string`	—
`disabled`	`boolean`	`false`

FaderValue

The value is as wide as the longest text the fader's range can show, and right-aligned, so moving the fader never shifts the layout. The editor opens at the same width.

Prop	Type	Default
`editable` Click to type a value. Accepts "-6", "−6 dB" and "-inf".	`boolean`	`false`

FaderScale

Takes DbScale props. The range, taper and orientation come from the fader.