Slider control design guidelines for Windows Phone
April 01, 2014
Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1
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.
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.
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:
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 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.
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.
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.
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.
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.