Intro

A slider is a control that enables the user to adjust single values within a specified numerical range.

Anatomy

Slider Control

A. Container

A slider control always stays in a container with reserved paddings to provide enough touch area for users to operate the slider.

B. Track

A slider controls has a track representing the selectable range. The part of track on the left side of the thumb is selected. The part of track on the right side of the thumb is unselected.

C. Thumb

Thumb indicates the selected value on the track. Users can drag the thumb along the track to adjust their selection.

Anatomy of slider control
Anatomy of slider control

Slider Form Cell

A. Property Name

Property name is a label text that identifies the purpose of the slider.

B. Selected Value

Selected value is a text string that reflects the value being selected.

C. Slider

Slider is the control for users to select the value. By default, the minimum value is displayed at the left of the slider control, and maximum value on the right. This minimum and maximum value labels can be changed to icons or other labels that best represent the type of value this slider is controlling.

Anatomy of slider form cell
Anatomy of slider form cell

When label text and value text can fit in one row (with at least 16dp horizontal padding in between), show them in one line to save vertical screen space.

When label text and value text don’t fit well in one line, show the value text in second line.

Slider form cell with short label (top) and with long label (bottom)
Slider form cell with short label (top) and with long label (bottom)

Variations

Depending on the use case, different content can be shown/hidden in a slider form cell.

Please choose the format that best serves the use case. Below are some examples.

No Value Label

In this use case, the actual value of selection is not important for users to see. We can remove the value text. This is also an example of using icons instead of minimum and maximum value.

Slider form cell with icons
Slider form cell with icons

Editable Value

If the selected value is editable, which allows users to set the slider to an exact value by typing, the value text becomes an input field at the right side of the slider control, replacing the maximum value.

Slider form cell with editable value
Slider form cell with editable value

Grouped Sliders

In general, each slider cell is stand alone. Group sliders together only when all of them contribute to one attribute (for example, when red, green and blue defines one color). Icon / short text can be used to label each row. Text labels should be as concise as possible. Within one group, use the row with the longest label or shortest slider as reference and vertical align other rows to it.

Three grouped slider form cells
Three grouped slider form cells

In this example, though all three sliders are related to “volume”, they are controlling three types of volume that do not come together as one attribute. So they should NOT be grouped.

Three ungrouped slider form cells controlling different types of volume
Three ungrouped slider form cells controlling different types of volume

Validation Message

Use validation message only when necessary: to show error message or direct feedback of this control. Do not distract users with unimportant information. For page level feedback, use a snackbar instead.

The validation message should be concise. One line of text is recommended for the validation message.

By default, there is no validation message. When the validation message is triggered, insert the message with padding below the 48dp slider control area (before the divider line if used). The content under it will be pushed down.

Slider form cell with error message (top) and with success message (bottom)
Slider form cell with error message (top) and with success message (bottom)

Specifications

Reserve 48dp height for a slider to provide enough touch area. Slider control has 16dp horizontal padding on each end of the track to accommodate the thumb and its animation.

Slider control specification
Slider control specification

When creating slider form cells with different content type, follow these rules: use a 36dp compact header to describe the attribute this slider / slider group is controlling, then 48dp for each row of slider control, and 4dp bottom padding below the last control.



Mobile

Default slider form cell on mobile
Default slider form cell on mobile
Default slider form cell on mobile - specifications
Default slider form cell on mobile - specifications
Default slider form cell with long label on mobile
Default slider form cell with long label on mobile
Default slider form cell with long label on mobile - specifications
Default slider form cell with long label on mobile - specifications
Slider form cell with icons on mobile
Slider form cell with icons on mobile
Slider form cell with icons on mobile - specifications
Slider form cell with icons on mobile - specifications
Grouped sliders on mobile
Grouped sliders on mobile
Grouped sliders on mobile - specifications
Grouped sliders on mobile - specifications


Tablet

Default slider form cell on tablet
Default slider form cell on tablet
Default slider form cell on tablet - specifications
Default slider form cell on tablet - specifications
Default slider form cell with long label on tablet
Default slider form cell with long label on tablet
Default slider form cell with long label on tablet - specifications
Default slider form cell with long label on tablet - specifications
Default slider form cell with icons on tablet
Default slider form cell with icons on tablet
Default slider form cell with icons on tablet - specifications
Default slider form cell with icons on tablet - specifications
Grouped sliders on tablet
Grouped sliders on tablet
Grouped sliders on tablet - specifications
Grouped sliders on tablet - specifications

Resources

Development: Reference in Object Cell

SAP Fiori for iOS: Slider

Material Design: Sliders