Updated: January 26, 2022

Slider Form Cell

FUISliderFormCell

Intro

A slider form cell displays a continuous range of values along a track.

The minimum and maximum values are established and a user uses their thumb to slide the handle along the track in order to select a single value between the minimum and maximum values. A slider form cell is typically found in create and filter modals.

A slider form cell can be used when selecting a precise value does not matter. If the exact value matters, use a picker control.

Slider form cell
Slider form cell

Anatomy

A. Label
Describes the value range of the slider.

B. Value
Indicates the selected value.

Determine the default minimum and maximum values of a slider form cell based on the context and use within the app.

C. Slider
Displays the range of values from which a selection can be made.

Values on the left of the handle are selected and indicated with dark tint color and values on the right are unselected.

Avoid using long text for minimum and maximum values as they can shorten the track.

Slider form cell anatomy
Slider form cell anatomy

Behavior and Interaction

A user can use a finger to slide the handle along the track to set an approximate value between the minimum and maximum values. The value displays the selection as the user slides the thumb control.

Slide the handle to adjust the value
Slide the handle to adjust the value

Adaptive Design

In regular width, a slider form cell are shown in a popover modal.

Compact (left) and popover modal (right)
Compact (left) and popover modal (right)

Resources

Development: FUISliderFormCell

SAP Fiori for Android: Slider