Svelte-Knobs is a Svelte component library that helps developers create customizable knob controls, which allow users to adjust values with a visual and tactile experience.

Perfect for audio applications, data visualization, or any project needing interactive controls.

Features

🕹️ Interactive Knobs: Implement rotatable knobs for precise value adjustments.

🎯 Snap Points: Define specific values for the knob to snap to, ensuring accuracy and predefined settings.

♿ Accessibility: Includes options for disabling knobs for accessibility considerations..

📈 Linear and Logarithmic Scaling: Support for both linear and logarithmic value ranges, accommodating diverse data types.

🎚️ Smoothness Control: Fine-tune the knob’s responsiveness and animation with adjustable stiffness.

✨ Customizable Styling: Tailor the knob’s appearance to match your project’s aesthetics.

Use Cases

Audio Applications: Svelte-Knobs is ideal for creating audio interfaces, allowing users to manipulate volume, frequency, panning, and other audio parameters. Imagine crafting a virtual mixing console or synthesizer with tangible controls.
Data Visualization Dashboards: Represent and manipulate data points interactively within dashboards. Users can adjust thresholds, filters, or other data parameters with a simple twist.
Interactive Simulations: Enhance user interaction within simulations. For instance, control the speed of a physics simulation or adjust environmental variables like temperature or wind speed.
Game Development: Integrate Svelte-Knobs into games to provide intuitive controls for settings, character attributes, or in-game mechanics.
Educational Tools: Create interactive learning experiences where users can manipulate variables and observe the results in real-time, like adjusting the parameters of a scientific model.

Installation

npm install svelte-knobs

Usages

create a simple knob for volume control:

import { createFloatParam, createRange } from 'svelte-knobs';
const basicParam = createFloatParam(createRange('lin', 0, 100));
let basicValue = 0;
<Knob param={basicParam} bind:value={basicValue} label="Volume" unit="%" />

For a logarithmic frequency control:

import { createFloatParam, createRange } from 'svelte-knobs';
const logParam = createFloatParam(createRange('log', 20, 20000));
let logValue = 20;
<Knob param={logParam} bind:value={logValue} label="Frequency" unit="Hz" />

To set up snap points for a release control:

import { createFloatParam, createRange } from 'svelte-knobs';
const snapParam = createFloatParam(createRange('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" />