Slider Control Design Guidelines for Windows Phone

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 application-specific range of values, by using a natural gesture and eschewing 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 are 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.

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 application when they 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.

Slider controls are fairly flexible controls that can be used effectively in a variety of scenarios. However, when customizing a Slider control, keep in mind the following considerations:

• Consider whether the Slider control has a “natural” orientation. Does the Slider control represent a real-world value that is typically shown in a certain orientation? Temperature, for example, is typically shown vertically. For scenarios where there is no evident “natural” orientation, we strongly recommend that you use a horizontal Slider 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 occluded 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

When you’re designing a custom Slider control, consider ways to present all the necessary information 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 we recommend finding 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 is closest to its current position in the direction of the contact.

Other Resources