Home

Awesome

svelte-knob

Knob control for Svelte.js

Install

npm install svelte-knob --save

Demo

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

Stargazers repo roster for @MelihAltintas/svelte-knob Forkers repo roster for @MelihAltintas/svelte-knob

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 <br> This will disable/enable knob animation but not value one. <br>

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

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

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

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.

OptionTypeDescriptionDefault
valueNumberUse the value attribute to set the value of the controlnone
maxNumberMaximum value of the control100
minNumberMinimum value of the control0
stepNumberSmallest increment the value can change by1
disabledBooleanSet to true to disable the knobfalse
sizeNumberVisual size of the control in px (or % if responsive is true)100
primaryColorStringColor of the value arc#409eff
secondaryColorStringColor of the rest of the control#dcdfe6
textColorStringColor of the value text#000000
strokeWidthNumberThickness of the arcs17
valueDisplayFunctionFunctionCustom function to alter the display text(v) => v
responsiveBooleanUse % instead of pxfalse
animationObjectOptional animation config object: { animated: false, animateValue: false, animationDuration: 2000 (in ms), animationFunction: 'ease-in-out' }null