Parameter Slider

A labelled slider with a numeric input, unit, marks and reset, for everything that is not a volume.

2 min read · 257 words

Sync offset

Delays the microphone to line up with your camera.

Installation

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

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

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

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

Usage

<script lang="ts">
	import {
		ParameterSlider,
		ParameterSliderControl,
		ParameterSliderHeader,
		ParameterSliderInput,
		ParameterSliderLabel,
	} from "#lib/components/ui/parameter-slider/index.js";

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

<ParameterSlider min={-1000} max={1000} step={5} unit="ms" bind:value={ms}>
	<ParameterSliderHeader>
		<ParameterSliderLabel>Sync offset</ParameterSliderLabel>
		<ParameterSliderInput />
	</ParameterSliderHeader>
	<ParameterSliderControl />
</ParameterSlider>

Use it for gain trims, delays, thresholds, times and frequencies. For volume, use Fader.

Anatomy

<ParameterSlider>
	<ParameterSliderHeader>
		<ParameterSliderLabel />
		<ParameterSliderReset />
		<ParameterSliderInput />
		<ParameterSliderValue />
	</ParameterSliderHeader>
	<ParameterSliderControl />
	<ParameterSliderMarks />
	<ParameterSliderDescription />
</ParameterSlider>

Examples

Log scale with marks

High-pass filter 1.0 kHz

Theming

Data attribute	Meaning
`data-modified`	The value differs from `resetValue`
`data-disabled`	Disabled

Accessibility

The label names both the slider and the number input.
ParameterSliderDescription describes the slider thumb.
The same keys as the fader work on the thumb; the number input supports arrow keys and typing.
Drag the unit next to the input to scrub the value.

API reference

Prop	Type	Default
`value` Bindable.	`number`	`resetValue ?? min`
`onValueChange` details.reason: drag, keyboard, input or reset.	`(value, details) => void`	—
`onValueCommit` Fires when a drag ends, after keyboard input, typing and reset.	`(value) => void`	—
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`largeStep`	`number`	`10`
`unit` Suffix such as "ms", "dB" or "Hz".	`string`	—
`decimals`	`number`	`from step`
`scale` log suits frequency and time.	`"linear" \| "log"`	`"linear"`
`origin` Where the fill starts.	`number`	`min`
`resetValue`	`number`	`the first value`
`marks` Shown by ParameterSliderMarks.	`{ value: number; label?: string }[]`	—
`format`	`(value: number) => string`	—
`disabled`	`boolean`	`false`

ParameterSliderInput

Prop	Type	Default
`scrub` Drag the unit to change the value.	`boolean`	`true`