​
Description

The Slider 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, click and drag, scroll and button presses.

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 Slider.

max
number
default: "100"

The maximum value allowed when interacting with the Slider.

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 and button color.

barColor
CSS Color String
default: "theme dependent"

Color of the percentage bar representing the value of the slider relative to its max.

bgColor
CSS Color String
default: "theme dependent"

Background color of the percentage bar.

OverviewKnob