https://github.com/eye-wave/svelte-knobs
Svelte component library for building customizable knob controls.
https://github.com/eye-wave/svelte-knobs
audio-production knobs svelte sveltekit ui-components
Last synced: 18 days ago
JSON representation
Svelte component library for building customizable knob controls.
- Host: GitHub
- URL: https://github.com/eye-wave/svelte-knobs
- Owner: eye-wave
- License: mit
- Created: 2024-10-21T22:29:43.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-15T23:24:06.000Z (3 months ago)
- Last Synced: 2025-05-01T02:53:40.250Z (18 days ago)
- Topics: audio-production, knobs, svelte, sveltekit, ui-components
- Language: Svelte
- Homepage: https://eye-wave.github.io/svelte-knobs/
- Size: 836 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-knobs
`svelte-knobs` is a Svelte component library for building customizable knob controls.
Inspired by:
- [vital](https://vital.audio)
- [solid-knobs](https://github.com/tahti-studio/solid-knobs)
- [nih-plug](https://github.com/robbert-vdh/nih-plug)
[Web demo](https://eye-wave.github.io/svelte-knobs)
## Installation
Add the library to your project:
```bash
npm install [email protected]
```
## Usage
#### Basic Knob
```svelte
import { SvgKnob } from 'svelte-knobs';
let value = $state(0.0);
{value.toFixed(2)}
```
A basic knob control with parameter scaling.
```svelte
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);
{freqParam.denormalize(value) | 0}hz
{linParam.denormalize(value) | 0}%
```
#### Snap Points
Set specific snap points and adjust snapping sensitivity using `snapThreshold`.
```svelte
import { SvgKnob } from 'svelte-knobs';
let value = $state(0.0);
{value.toFixed(2)}
```
#### Enum Parameter
Example usage of `EnumParam` for working with enumerated options.
```typescript
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();
```
```svelte
{fruitParam.denormalize(value)}
{filterTypeParam.denormalize(value)}
{booleanParam.denormalize(value)}
```
#### Disabled Knob
Disable knob interactivity
```svelte
```
## License
MIT License