Sliders

Sliders allow users to make selections from a range of values.

Motion Functions

Didactic Function

Feedback Function

The function of motion in a slider is Didactic and Feedback. Changes in values in sliders can be highlighted by numerical or text changes and visual indicators that correspond to the slider's use. Motion can highlight the relationship between the range in which the slider moves and the properties affected by this change.

Examples

Rating slider by Aaron Iker

In the above example, the change in the value of the slider leads to a change in the emotion conveyed by the face that matches the selected range in the slider. This change in emotion conveys didactic information to the user about the properties of the slider. Additionally, the principle of parenting demonstrates to the user that when the slider changes, so does the emotional response with the emoji.

UI/UX slider by Benjamin Zehrfeldt

Weight slider exploration designed by Tony Pinkevych

The slider above demonstrate the principle of value change. The dynamic changing of the values shows the user what the selection they are making is. Secondary animations with the color change on the left and the change in boxes on the right serve to reinforce the action that the user takes. These actions inform the user that they may be reaching an upper or lower bound of the slider.

Slider designed by Oleg Frolov

Similarly, this example also demonstrates a value change along with the parenting principle. When the slider moves across space, the value contained within changes. This gives the user information that moving it across the line will change the relationship it has with the number and will also give them the magnitude of the change.