svelte-knob

Knob control for Svelte.js

Install

npm install svelte-knob --save

Demo

https://svelte.dev/repl/609b8f2e4540442197fc12cbc4165d55?version=3.31.1

Usage

import Knob from 'svelte-knob'

Examples

Most basic usage:

<Knob value={50} />
<Knob value={30} step={10} strokeWidth={8} primaryColor="#E844C3" secondaryColor="#E7B6DC" textColor="#E844C3"/>
<Knob value={45} min={-10} max={100} />

Responsive

Set the component responsive.

Size property is always available, be careful if size is more than 100, size is expressed in % in this mode

<Knob
    responsive={true}
/>

Animation:

Disabled by default

animated true|false
This will disable/enable knob animation but not value one.

animateValue true|false
Same as animation expect for the value.

animationDuration integer, in milliseconds
set the duration of both animation.

animationFunction string
CSS animation function, all CSS animations are available (eg: linear, ease-in, ease-out, ...).

Examples

Only animate knob itself

<Knob
    animation="{
        animated: true
    }"
/>

Only animate knob value

<Knob
    animation="{
        animateValue: true
    }"
/>

animated and animateValue can be set at the same time

This animation use CSS linear function during 5 sec

<Knob
    animation="{
        animated: true,
        animateValue: true,
        animationDuration: '5000',
        animationFunction: 'linear'
    }"
/>

animationDuration should be expressed in ms (you can use multiplication if you prefer eg: "5 * 1000")

Properties

The only required property is value.