Guidelines and checklist for sliders (Windows Runtime apps)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
This topic describes best practices for adding sliders to your Windows Store app using C++, C#, or Visual Basic.
Roadmap: How does this topic relate to others? See:
- Roadmap for Windows Runtime apps using C# or Visual Basic
- Roadmap for Windows Runtime apps using C++
Is this the right control?
Use a Slider control when you want your users to be able to set defined, contiguous values (such as volume or brightness) 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.
Don't use a slider for binary settings. Use a ToggleSwitch instead.
Here are some additional factors to consider when deciding whether to use a slider:
- Does the setting seem like a relative quantity? If not, use RadioButton, ListBox, or ComboBox controls.
- Is the setting an exact, known numeric value? If so, use a numeric text box.
- Would a user benefit from instant feedback on the effect of setting changes? If so, use a slider. For example, users can choose a color more easily by immediately seeing the effect of changes to hue, saturation, or luminosity values.
- Does the setting have a range of four or more values? If not, use RadioButton controls.
- Can the user change the value? Sliders are for user interaction. If a user can't ever change the value, use read-only text instead.
If you are deciding between a slider and a numeric text box, use a numeric text box if:
- Screen space is tight.
- The user is likely to prefer using the keyboard.
Use a slider if:
- Users will benefit from instant feedback.
Choosing the right layout: horizontal or vertical
You can layout your slider horizontally or vertically. Use these guidelines to determine which layout to use.
- 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.
- If the control is used to seek within media, like in a video app, use a horizontal orientation.
- When using a slider in a page that can be panned in one direction (horizontally or vertically), use a different orientation for the slider than the panning direction. Otherwise, users might swipe the slider and change its value accidentally when they try to pan the page.
- If you're still not sure which orientation to use, use the one that best fits your page layout.
Guidelines for the range direction
The range direction is the direction you move the slider when you slide it from its Minimum value to its Maximum value.
- For a vertical slider, put the largest value at the top of the slider, regardless of reading direction. For example, for a volume slider, always put the maximum volume setting at the top of the slider. For other types of values (such as days of the week), follow the reading direction of the page.
- For a horizontal slider, put the lower value on the left side of the slider for left-to-right page layout, and on the right for right-to-left page layout.
- The one exception to the previous guideline is for media seek bars: always put the lower value on the left side of the slider.
Guidelines for steps and tick marks
- Use StepFrequency settings that make sense for the purpose of your slider. For example, if you use a slider to specify the number of movie tickets to buy, don't allow floating point values. Give it a StepFrequency value of 1.
- If you specify a StepFrequency (also known as snap points), make sure that the final step aligns to the slider's max value. For example, don't set the StepFrequency to 2 and the Maximum to 15.
- Use tick marks when you want to show users the location of major or significant values. For example, a slider that controls a zoom might have tick marks for 50%, 100%, and 200%.
- Show tick marks when users need to know the approximate value of the setting.
- Show tick marks and a value label when users need to know the exact value of the setting they choose, without interacting with the control. Otherwise, they can use the value tooltip to see the exact value.
- Always show tick marks when snap points aren't obvious. For example, if the slider is 200 pixels wide and has 200 snap points, you can hide the tick marks because users won't notice the snapping behavior. But if there are only 10 snap points, show tick marks.
Guidelines for labels
Slider labels
The slider label indicates what the slider is used for.
- Use a TextBlock control to label a slider.
- Use a label with no ending punctuation.
- Position labels above the slider when the slider is in a from that places its most of its labels above their controls.
- Position labels to the sides when the slider is in a form that places most of its labels to the side of their controls.
- Avoid placing labels below the slider because the user's finger might occlude the label when the user touches the slide.
Range labels
The range, or fill, labels describe the slider's minimum and maximum values.
- Label the two ends of the slider range, unless a vertical orientation makes this unnecessary.
- Use only one word, if possible, for each label.
- Don't use ending punctuation.
- Make sure these labels are descriptive and parallel. Examples: Maximum/Minimum, More/Less, Low/High, Soft/Loud.
Value labels
A value label displays the current value of the slider.
- If you need a value label, display it below the slider.
- Center the text relative to the control and include the units (such as pixels).
Do's and don'ts
Do
Size the control so that users can easily set the value they want. For settings with discrete values, make sure the user can easily select any value using the mouse.
Give immediate feedback while or after a user makes a selection (when practical). For example, the Windows volume control beeps to indicate the selected audio volume.
Use labels to show the range of values. Exception: If the slider is vertically oriented and the top label is Maximum, High, More, or equivalent, you can omit the other labels because the meaning is clear.
Disable all associated labels when you disable the slider.
Don't
Don't use a slider as a progress indicator.
Don't change the size of the slider indicator 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 a 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.