Slider

Interaction Specs

Interaction Specs: 
1. Slider Control Default Setting

The default slider control value is set to zero.

2. On Hover

Hovering over the slider control handle highlights it and changes the color to #DAECCF.

3. Tooltip

Tooltip appears above the control when the user hovers over the slider control handle.

4. Drag and Move

The user can drag and move the slider control handle to see the value change.

5. Locked to Group Slider Controls

Two-sliders control can be locked and paired when the user drags and moves one slider control at a time.

6. Second Slider Control

The second slider control value changes when the user moves the first slider control.

7. Value

Each slider control displays a value.

8. Total Value

The user can combine the slider control values to see the total value.

9. Moving Slider Control

When the user drags and moves a single slider control, they can see the new value on tooltip and in the text field.

10. Reset

The user can click on the Reset link to reset the slider control value back to zero.

11-13. Reset Result

The same default value is applied to the slider controls, as well as in the text fields and the total value.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern?

A slider allows the user to choose a value within a limited range. The user drags a handle along one dimension to set a value. Two handles on the same slider allow the user to choose a start and end point for a range of values.

  • Sliders can allow for continuous adjustment, or of values. Sliders can also be used to choose among discrete values, "snapping" from one value to the next.

What's the Solution?

Present the range as a slider with a drag handle. The user drags the handle to set the value within the range.

When the user drags a handle to choose a value, they can easily make a selection within a range and avoid selecting an invalid value.

Sliders allow the user to easily see the entire range of valid values and the currently selected value.

Sliders help the user manipulate a value within a range. By comparison, drop down lists do not show all valid values at once, and radio buttons only provide a small click target.

Sliders allow the user to select fractional values within the allowable range.

When to Use This Pattern?

The user needs to specify a value within a range.

DO NOT Use This Pattern When...

  • Each value contains a large amount of text. Use a drop down list or radio buttons instead.
  • The chosen value cannot be constrained to a specific range.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015