svelte-knobs
is a Svelte component library for building customizable knob controls.
Inspired by:
Add the library to your project:
npm install svelte-knobs
<script lang="ts">
import { createFloatParam, Knob } from 'svelte-knobs';
const basicParam = createFloatParam('lin', 0, 100);
let basicValue = 0;
</script>
<Knob param={basicParam} bind:value={basicValue} label="Volume" unit="%" />
A basic knob control with linear scaling.
<script lang="ts">
import { createFloatParam } from 'svelte-knobs';
const logParam = createFloatParam('log', 20, 20_000);
let logValue = 20;
</script>
<Knob param={logParam} bind:value={logValue} label="Frequency" unit="Hz" />
Knob with logarithmic scaling (default base is 10).
Control the knob's smoothness by adjusting the stiffness
property.
<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={0.1} />
<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={1} />
Set specific snap points and adjust snapping sensitivity using snapThreshold
.
import { createFloatParam, createRange } from 'svelte-knobs';
const snapParam = createFloatParam('lin', 0, 2000);
const snapPoints = [0, 500, 1000, 1500, 2000];
let snapValue = 0;
<Knob
param={snapParam}
bind:value={snapValue}
snapValues={snapPoints}
snapThreshold={0.1}
label="Release"
unit="ms"
/>
Example usage of EnumParam
for working with enumerated options.
import { createEnumParam, type Variant } from 'svelte-knobs';
const fruitParam = createEnumParam(['🍍', '🍉', '🍌', '🍋'] as const);
let fruitValue: Variant<typeof fruitParam> = '🍉';
<Knob param={fruitParam} bind:value={fruitValue} label="Fruit" />
Disable knob interactivity
<Knob param={basicParam} value={58} disabled />
MIT License