Sliders

A slider is a horizontal track that allows users to adjust values within a continuous or discrete spectrum. The slider has two parts: the track and the handle. The track shows the range of values, and the handle is the part you move along the track.

You can use sliders for various features like color, brightness, and media controls. Sliders come in two sizes: small and large. The small slider has a thin track and handle. The large slider has a handle the same height as the marker.

The Default Slider is the most commonly used variant. It comes in small and large sizes, and the large size can have an icon in the handle to show the value being adjusted.

A text slider has a pill-shaped handle that displays a text string or icon to show the value being adjusted or the current value of the slider.

Discrete sliders let users adjust values to specific anchored points along the track. Dots are used to indicate potential anchored values to the user.