Slider control design guidelines for Windows Phone

Article
11/23/2015

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

A Slider control lets users select a value from a range of allowed values by scrubbing back and forth on a track.

This topic contains the following sections.

Appearance and action

A Slider control has two visual elements: the “track” and the “thumb.” The track is a straight line, and the thumb is a selector that slides along the track. The user drags the thumb along the track to change the value of the Slider control. Users also tap the Slider control’s track to set it to a specific value.

Detailed description

Using a Slider control allows users to pick a value quickly and easily from within an app-specific range of values, by using a natural gesture and avoiding the need for the on-screen keyboard.

Use a Slider control to pick from within a set of known, relative quantities; typically, these values make sense when presented linearly, and increase or decrease in predictable increments.

You should use the Slider control when possible, because it makes for a quick, clean, intuitive way to select among a group of values. However, there are some circumstances where a Slider control isn’t appropriate:

If you’re using a Slider control to let the user set an exact, known numeric value, you may want to use a TextBox control instead.
Do users benefit from instant feedback when they set changes with this control? If not, then a CheckBox or RadioButton control may be more appropriate.
If there are fewer than four discrete values represented by a Slider control, you may want to use RadioButton controls instead.

Standard use

Use a Slider control to give users fine-grained control over selecting a specific value from a continuous range of values. Common examples include a volume Slider control or brightness-level Slider control. Use a Slider control to display instant feedback within another visual element of your app when users adjust the value of the Slider control.

A Slider control has a minimum and a maximum increment value. A Slider control can be oriented either vertically or horizontally, but its termini always fit within the bounds of a view.

A Slider control is also useful anywhere users would benefit from instant feedback when they adjust a value. Sometimes, the availability or appearance of a Slider control can be dependent on another control, such as a CheckBox control.

Design guidelines

Slider controls are fairly flexible controls that can be used effectively in a variety of scenarios. However, if you plan to customize a Slider control, keep these things in mind :

Set the incremental changes on a Slider control in a way that makes sense to users. Western cultures typically prefer the values of a Slider control to increase from left to right, while users from other geographies may prefer right-to-left or vertical orientation.
Use graphical tick marks below the Slider control when users need to know the approximate value of the setting.
It is not a best practice to use a Slider control and a numeric TextBox control for the same setting. Use only the more appropriate control; redundancy here can be confusing. Use both controls only when a user needs both immediate feedback and the ability to set an exact numeric value.
Because the visible thumb of the Slider control can be covered by the user’s finger, we recommend that you maximize feedback and synchronize the changes in the Slider control’s value to some external mechanism, whether it’s a label or some display parameter that adjusts dynamically as the Slider control is manipulated.

Common mistakes

It’s up to you to design an effective Slider control, but there are some conventions that are best avoided:

If you disable a Slider control, also disable any associated labels.
Don’t use a Slider control as a progress indicator.
Don’t label every tick mark.
Don’t change the size of the thumb from the default size.
Don’t make a Slider control track anything but a straight line.
The Slider control has a large hit target region. To maintain good touch accessibility, the Slider control shouldn’t be positioned too close to the edge of the display.
Like any drag-enabled control, the Slider control shouldn’t be used in a control that itself supports dragging, such as the Pivot control or the Panorama control.

Customization

When you’re designing a custom Slider control, consider ways to present all the necessary info to the user with as little clutter as possible. Always use a value label if a user needs to know the units to understand the setting, but find creative ways to represent these values graphically. A Slider control that controls volume, for example, could display a very small speaker graphic at the minimum end of the Slider control, and a very large speaker graphic at the maximum end.

You can also customize the behavior of a Slider control. Depending on how it’s being used, a Slider control might benefit from the following behaviors:

Move-to-Position: the thumb jumps to the position of the contact.
Snap-to-Tick: the thumb jumps to the tick value that’s closest to its current position in the direction of the contact.