svelte-knobs

svelte-knobs is a Svelte component library for building customizable knob controls.

Inspired by:

• vital
• solid-knobs
• nih-plug

Web demo

Installation

Add the library to your project:

npm install svelte-knobs@1.0.0-beta.1

Usage

Basic Knob

<script>
	import { SvgKnob } from 'svelte-knobs';

	let value = $state(0.0);
</script>

<SvgKnob bind:value />
<span>{value.toFixed(2)}</span>

A basic knob control with parameter scaling.

<script lang="ts">
	import { LinearParam, LogParam } from 'svelte-knobs/params';
	import { SvgKnob } from 'svelte-knobs';

	let value = $state(0.0);

	const freqParam = new LogParam(20, 20_000, 10);
	const linParam = new LinearParam(0, 100);
</script>

<SvgKnob bind:value />
<span>{freqParam.denormalize(value) | 0}hz</span>

<SvgKnob bind:value />
<span>{linParam.denormalize(value) | 0}%</span>

Snap Points

Set specific snap points and adjust snapping sensitivity using snapThreshold.

<script>
	import { SvgKnob } from 'svelte-knobs';

	let value = $state(0.0);
</script>

<div>
	<SvgKnob bind:value snapPoints={[0.5]} />
	<span>{value.toFixed(2)}</span>
</div>

Enum Parameter

Example usage of EnumParam for working with enumerated options.

import { BoolParam, EnumParam } from 'svelte-knobs/params';
import { SvgKnob } from 'svelte-knobs';

let value = $state(0);

const fruitParam = new EnumParam(['🍍', '🍉', '🍌', '🍋', '🍇'] as const);
const filterTypeParam = new EnumParam([
  'Low pass',
  'High pass',
  'Low shelf',
  'High shelf',
  'Bell',
  'Notch',
  'Allpass'
] as const);

const booleanParam = new BoolParam();

<SvgKnob
	bind:value
	snapPoints={fruitParam.snapPoints}
	snapThreshold={fruitParam.snapThreshold}
/>
<p>{fruitParam.denormalize(value)}</p>

<SvgKnob bind:value {...filterTypeParam.knobProps} />
<p>{filterTypeParam.denormalize(value)}</p>

<SvgKnob bind:value {...booleanParam.knobProps} />
<p>{booleanParam.denormalize(value)}</p>

Disabled Knob

Disable knob interactivity

<SvgKnob disabled />
<ImageKnob disabled />
<Draggable disabled />

License

MIT License