When to use

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.

When to use

Allows the user to specify a range between a minimum and a maximum.

Numeric field positioning

A basic slider and a min-max slider with corresponding numeric fields

Single numeric fields:
When paired with a basic slider, numeric fields are positioned to the right of the slider.

Min-max numeric fields:
When paired with a min-max slider, numeric fields are positioned on both sides of the slider, to represent the minimum and maximum values.

Text label

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

Slider handle

Alternate name

A slider handle is alternately referred to as a “slider thumb” in some documentation and API names.

A basic slider with a text label on its left and a numeric field to its right

Handles appear as a circular control above the Slider Groove. The handle’s position represents the current value for the Slider; the farther to the right of the Groove, the higher the value. A Slider’s Handle cannot pass beyond the edges of its Groove, which is bookended with the minimum and maximum values at either end.

Movement of the slider’s handle changes the value. On a typical horizontal slider, both the left and right ends of the slider represent the two extreme values allowed by the control.

Slider groove

Alternate name

A slider groove is alternately referred to as a “slider track” in some documentation and API names.

• Slider Groove should be laid out horizontally; the far left of the slider represents the lowest available value while the far right represents 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 Groove should occupy the same amount of space
• In situations where the range allows and/or requires a level of accuracy that becomes difficult to control with the handle alone a Numeric Field can be placed to the right or left of the Slider, displaying the current value and allowing users to adjust it directly through numeric inputs

Mouse 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.

Cursor changes from scrub glyph to text cursor when hovering over a Numeric Field

Mouse events: Slider label and handle

• Dragging a sliders handle to the left should always result in a decrease in value while dragging to the right should always result in an increase
• A slider can have its value reset by clicking on or scrubbing along the track
• If a user clicks on the Groove (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 Groove the Handle will reposition below the cursor
• 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 change the value by dragging the cursor left or right. The cursor switches its glyph when positioned over the label to communicate this ability

Keyboarding

• When focused, the right arrow key should increase the Slider's value and the left arrow key should decrease it
• Pressing and holding an arrow key will cause the value to continuously increase until it has reached the maximum or minimum allowable

Anatomy

Anatomy of a slider featuring its four most common elements

A slider can contain the following elements:
‍
1. Label
2. Slider handle (also called slider thumb)
3. Slider groove (also called slider track)
4. Numeric field

Layout

Four common aspects of a slider’s layout

• Text label aligns with left edge of its window
• Sliders expand left when window is resized
• Sliders retain their right margin when window is resized
• Numerical fields aligns with right edge of its window

1. slider-thumb

2. slider-groove

3. slider-halo