Please note : This page is under construction. Additional content, including visuals, code snippets, and layout information, will be available soon.

Overview

Sliders are draggable control elements that allow the user to manually set a value from a track representing an allowable range. A slider provides visual feedback for changes made to the value through the repositioning of its handle(s) relative to either end of its length.

Sliders are commonly used for processes where experimentation is conducive to arriving at the desired result, allowing users to easily make manual adjustments while offering live changes in response to manipulations. They are most commonly accompanied by a Numeric Field, which displays the value and acts as an alternate input for greater specificity than that offered by the draggable control. 

Heuristics

Usable. Sliders should be controllable, allowing for even increments between values.

Responsive. Sliders should elicit noticeable changes in their corresponding views.

Appropriate. Sliders should only appear when experimenting with values is conducive to arriving at a user’s desired result.



General Guidelines

Sliders should appear in situations where experimentation is conducive to achieving a desired result.

Sliders should be specialized and relate to individual variables, not complex processes. If a subject contain multiple related variables an alternate component template should be considered.

Sliders should alter variables within a controllable range; if a user can not easily achieve their desired value through repositioning the handle a Numeric Field should be included with the element. If the scope or specificity of values is such that the accuracy required for setting the intended outcome cannot be reliably set with a slider’s handle consider using an alternate control.


Related Elements

Partition Bar

A Partition Bar acts as a visual control for the representation and allotment of portions for a subject or process. Partition bars are used in circumstances where multiple ranges or portions need to be set, for example in the allotment of memory or processing power. 

Usage Guidelines

Sliders often appear in interfaces where an absolute value is unclear or where slight alterations to a value may prove more desirable for users: In these cases Sliders allow the user to experiment within a range of values with immediate results.

Sliders should only be used for linear values, such as those which can be represented by numerals. They should not be used for complex values like position or rotation which are better served by in-view tools and input fields.

Avoid Sliders on items which may have redundant or more specialized controls, for example on Transforms.


Types

There are two main types of Slider; Basic Sliders and MinMax Sliders.


Basic Sliders

Basic sliders are used for single-value inputs: These sliders appear in circumstances where a user needs to assign a value within a range, with the position of the handle directly reflecting the assigned value. 

MinMax Sliders

In certain circumstances a user may need to set a range rather than an individual value; in these cases a MinMax Slider allows the user to dictate the desired constraints for a range through the use of dual handles (one for the maximum value and the other for the minimum). These elements can also be used for portioning or defining an acceptable level of variance.

Style

Sliders are simple control elements comprised of a track representing the available range and a handle representing the active value within said range: The position of the handle’s placement moves and adjusts to cause or reflect changes in the value.


Layout

Label

A slider’s label should clearly indicate the nature of the value being set. The label should always appear to the left of component, reflecting all of its states.


Handle

Slider handles appears as a circular control above the value track. The handle’s position represents the current value for the slider; the farther to the right of the track the higher the value. A slider’s handle cannot pass beyond the edges of its track, the extremes of either side representing the constraints for possible values.


Track

The slider’s track should be laid out horizontally; the far left of the slider must always represent the lowest available value while the far right must represent the highest available value.

The length of a slider should be consistent with other sliders within the same interface; while the proportionate change in value may differ the track should occupy the same amount of space.
In situations where the range allows and/or requires a level of specification that becomes difficult to control with the handle alone a Numeric Field can be placed to the right of the Slider, displaying the current value and allowing users to adjust it directly through numeric inputs.

In situations where the range allows for only specific interval values the track should feature tick marks representing the available values, in which the handle snaps into place.

At no point should it be possible for a value to exceed the range represented by the slider.

Do
Use a slider to visually represent the available range and limit the handle’s position to inside it.


Don’t

Allow the handle to pass beyond either end of the Slider.


Cursor

The cursor’s glyph will adapt depending on which portion of the slider it’s positioned above; when the cursor hovers over the slider’s label it automatically converts to a “scrub” glyph, while it will show a text cursor if positioned above an attached numeric field.

Behavior

Sliders are an adjustment-based control element, where the position of the control dictates the current value assigned to its subject. They’re a straight-forward component, allowing users to increase or decrease a value by dragging the element’s handle left or right.


Constraints

The ends of a slider (both its left and right ends) represent the two extremes allowed by the control. For example, a slider may start at a value of zero and go up to a value of fifty; in this case the left edge of the slider represents a value of zero while the right edge represents a value of fifty, the control being restricted to the range between the two.


Adjusting Values

Sliders are primarily controlled by dragging, though many allow direct numeric input on an attached Numeric Field. When the user adjusts the slider’s control the value adjusts proportionately: Dragging a Slider’s control to the left should always result in a decrease in value while dragging to the right should always result in an increase.

After clicking or navigating to a slider’s handle the user can increase or decrease its value with the horizontal arrow keys, using the right arrow to increase the value or the left arrow to decrease it. Pressing and holding an arrow key will cause the value to continuously increase until it has reached the maximum or minimum allowable.

A slider can have its value reset by clicking on or scrubbing (dragging the held cursor back and forth) along the track: If a user clicks on the track (not on the handle) the value will be set to the click’s location, with the handle automatically repositioning underneath the cursor to reflect the new input. If the user clicks and drags along the track the slider’s handle will reposition below the cursor and scrub with it.

The slider’s value can also be adjusted through its label: If a user clicks and holds while hovering over the slider’s label they can scrub the value by dragging the cursor left or right. The cursor switches its glyph when positioned over the label to communicate this ability.


States

Hover

The hover state for sliders varies based on which portion of the element the cursor is above: Hovering over the handle of a slider will cause the control element to highlight, hovering over the label will cause the cursor to change to a “scrub” glyph, and hovering over an attached numeric field will cause the field to highlight (similar to standard numeric fields). Hovering over the track does not provoke any changes.


Default

A slider is still active when in its default state; because a Slider represents a value it can be considered active unless disabled and will always show the current value assigned (even if interactions with the component are not permitted).


Focused

When in the focused state the label, control, and attached field will all be highlighted. The arrow keys can be used to adjust the value left and right (to decrease and increase respectively).


Disabled

A disabled slider will be unresponsive to direct user actions but may still display the value associated with the Slider and, on occasion, be manipulated by other means (in code, or as a result of a scene progressing. Regardless of whether or not the Slider control changes position the Slider is considered to be in a “Disabled” state when it can not directly receive user input.