​
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

parameterStorerequired
CustomWritable<number>

The input store associated with the parameter.

min
Default: "0"
number

The minimum value allowed when interacting with the Knob.

max
Default: "100"
number

The maximum value allowed when interacting with the Knob.

minDegree
Default: "60"
number

Minimum angle allowed when interacting with the Knob rotation.

maxDegree
Default: "300"
number

Maximum angle allowed when interacting with the Knob rotation.

step
Default: "1"
number

Value by which the stored value should increment.

label
Default: "Value"
string

Displayed label for the slider.

fixed
Default: "2"
number

Precision in decimal places.

fontColor
Default: "theme dependent"
CSS Color String

Text color.

knobColor
Default: "theme dependent"
CSS Color String

Knob background color.

knobValueColor
Default: "theme dependent"
CSS Color String

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

indicatorColor
Default: "theme dependent"
CSS Color String

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

SliderRadio Group