Use a slider when you want users to be able to set defined, contiguous values (such as volume) or a range of discrete values (such as screen resolution settings). A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to 2 or 5. Use a slider when the user would benefit from instant feedback on the effect of setting changes. For example, users can choose a color more easily by immediately seeing the effect of changes to hue, saturation, or luminosity values. Only a step range of 1 is supported.
- Use a natural orientation. For example, if the slider represents a real-world value that is normally shown vertically (such as temperature), use a vertical orientation. Put the lower range value on the left side of horizontal sliders and at the bottom of vertical sliders.
- The slider label indicates what the slider is used for.
- Units (such as degrees, pixels, etc.) should be mentioned either in the slider label or in the current value label.
- Don’t use slider to control the playback of streaming media, use the media transport component instead.
- Don’t use a slider for binary settings. Use a toggle instead.
- Don’t use for a range of 3 values or less. Use radios instead.
- Don’t use a slider as a progress indicator, use progress instead.
- Don’t change the size of the slider thumb from the default size.
- Don’t create a continuous slider if the range of values is large and users will most likely select one of several representative values from the range. Instead, use those values as the only steps allowed. For example, if time value might be up to 1 month but users only need to pick from 1 minute, 1 hour, 1 day or 1 month, then create a slider with only 4 step points.
- If a user can’t ever change the value, use read-only text instead.
- If the quantity is not relative, consider a radio.
- If the setting is an exact, known numeric value, use a numeric text-field, especially if screen space is tight or if the user is likely to prefer using the keyboard.
Also known as
- Default: Slider is displayed horizontally and can be moved to the right or left.
- Vertical: Slider is displayed vertically and can be moved to the top or bottom.
Code and preview
<div class="c-slider"> <label for="exampleSlider" class="c-label">Horizontal</label> <input type="range" name="exampleSlider" value="50" max="100" step="1"> </div>
<div class="c-slider f-vertical"> <label for="exampleSliderVertical" class="c-label">Vertical</label> <input class="f-vertical" type="range" name="exampleSliderVertical" value="50" max="100" step="1"> </div>