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 [email protected]

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