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.