Knob

A flexible knob component for use with our data flow system

Description

The Knob is an accessible, flexible component that directly interfaces with Svelvet’s custom input and output stores. It can be controlled via keyboard input, arrow keys, scroll, and click and drag.

Refer to the overview in this section for more detailed usage.

Props

parameterStore

CustomWritable<number>

required

The input store associated with the parameter.

min

number

default: "0"

The minimum value allowed when interacting with the Knob.

max

number

default: "100"

The maximum value allowed when interacting with the Knob.

minDegree

number

default: "60"

Minimum angle allowed when interacting with the Knob rotation.

maxDegree

number

default: "300"

Maximum angle allowed when interacting with the Knob rotation.

step

number

default: "1"

Value by which the stored value should increment.

label

string

default: "Value"

Displayed label for the slider.

fixed

number

default: "2"

Precision in decimal places.

fontColor

CSS Color String

default: "theme dependent"

Text color.

knobColor

CSS Color String

default: "theme dependent"

Knob background color.

knobValueColor

CSS Color String

default: "theme dependent"

Color of the output value displayed at the center of the knob.

indicatorColor

CSS Color String

default: "theme dependent"

Color for indicator symbol displaying the current rotational position of the knob.