Vivid Logo Vivid

Slider

Allows users to choose from a range of values along a horizontal or vertical line

Connotation

Use the connotation attribute on Slider to control the Slider track.

Markers

Use the markers attribute to add tick marks on the slider.
The markers are set by the value of step.

Orientation

The orientation attribute controls which axis the Slider is aligned.
Below is an example of vertical alignment.

When used vertically, the Slider fits the height of its container.

Pin

Use pin attribute to display a tooltip on the Slider knob.
Use the valueTextFormatter member to customize the format of the value.

Disabled

The disabled attribute disables the Slider.