Slider

The slider control allows user to select and entry data from among a linear range of values.

slider

Usage

Sliders are used when you want the user to select a value from a predetermined range of values. A typical usage is selecting the contrast color value for an image.

States

Active

slider

Disabled

slider disabled

Variations

Slider

The standard slider contains no labels, but you can provide other references around it if you want. For example, the selected value can be perceived through an associated image. Example: A color contrast slider for an image.

slider

Slider with label

This variation supports a reference label that displays the slider head's value. This slider type is used when the range of values is easy to understand. Example: Color opacity range is always 0-100.

slider

Slider with references

A Slider with references is used when the range of values are not commonly known.

slider

Menu