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.
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 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 with references
A Slider with references is used when the range of values are not commonly known.