Data Flow
Slider

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

parameterStorerequired
CustomWritable<number>

The input store associated with the parameter.

minDefault: "0"
number

The minimum value allowed when interacting with the Slider.

maxDefault: "100"
number

The maximum value allowed when interacting with the Slider.

stepDefault: "1"
number

Value by which the stored value should increment.

labelDefault: "Value"
string

Displayed label for the slider.

fixedDefault: "2"
number

Precision in decimal places.

fontColorDefault: "theme dependent"
CSS Color String

Text and button color.

barColorDefault: "theme dependent"
CSS Color String

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

bgColorDefault: "theme dependent"
CSS Color String

Background color of the percentage bar.