Slider
[This documentation is preliminary and is subject to change.]
.png "Windows app: slider controls")
Windows app: slider controls
.png "Windows Phone app: slider controls")
Windows Phone app: slider controls
Control description
A slider control (also known as a range control) lets the user set a value in a given range by tapping—or scrubbing back and forth—on a track.
Usage guidance
A slider can be used to input an approximate, relative quantity from a continuous (but limited) range. You would use a slider for a volume or brightness control, for example, or in any situation where precision is not a priority.
Using a slider involves easy, natural gestures, and there’s no need to type in digits on a physical or on-screen keyboard. Where appropriate, you should give instant and continuous feedback while the user is interacting with a slider.
A slider can also be used to pick from a fairly small set of discrete values, such as a set of supported screen resolutions or text sizes. These will be values that make sense when they’re presented on a track: they’ll decrease and increase as the slider value moves back and forth.
A slider can be oriented either vertically or horizontally, but its termini should always fit within the bounds of a view.
Factors that indicate against using a slider include:
- The user wishes to set an exact numeric value. Use a text input box.
- It’s not possible, or it’s not appropriate, to give instant feedback while the user is setting a discrete value. Consider a single-select list box, a drop-down list, or radio buttons.
- There are three or fewer discrete values represented by the slider. Consider a single-select list box, a drop-down list, or radio buttons.
Appearance and interaction
A slider is composed of a track and a thumb. The track is a bar (which can optionally show various styles of tick marks) representing the range of values that can be input. The thumb is a selector, which the user can position by either tapping the track or by scrubbing back and forth on it.
Design guidelines
- Script flows from left to right in some languages, and from right to left in others. Consider this when setting the flow direction and/or orientation of your slider. Western cultures typically expect values to increase to the right.
- Use tick marks when the user needs to know the approximate value of the setting.
- Using a slider and a numeric text input box for the same setting is redundant and not recommended. Use only one control (whichever is more appropriate) unless the user needs both immediate feedback while scrubbing and the ability to set an exact numeric value.
- Since the slider’s thumb is covered during scrubbing, consider showing the current value some other way, with a label or other visual. A slider setting text size could render some sample text of the right size beside the slider.
- If you disable a slider control, also disable any associated labels, or feedback visuals.
- A slider is not a progress indicator. Use a progress bar instead.
- A slider has a large touch target. To maintain touch accessibility, a slider should be positioned far enough away from the edge of the display.
- When you’re designing a custom slider, consider ways to present all the necessary info to the user with as little clutter as possible. Use a value label if a user needs to know the units in order to understand the setting; find creative ways to represent these values graphically. A slider that controls volume, for example, could display a speaker graphic without sound waves at the minimum end of the slider, and a speaker graphic with sound waves at the maximum end.
Examples
.png "A screenshot that illustrates the standard slider control")