Sliders and Steppers

Sliders and steppers are similar controls for choosing a value from within a range.

With a slider, users drag a thumb along a bar. The thumb points to the current value, bounded by minimum and maximum values.

   

A stepper, typically paired with a text input box, allows users to adjust a value by either clicking arrow buttons or entering a value.

   

Guidelines

  • Use a slider to allow the user to modify values when the set of possible values is large. Also use a slider when the minimum and maximum values are text or graphics.
     

  • Use a stepper to allow users to increment numbers by a small amount (such as changes in memory allocation or the number of CPUs).
  • Provide labels that convey the meaning of the control.
  • Use sentence-style capitalization for text labels.
  • Set the default value to the most common choice.
  • Don't use both a slider and a stepper to set the same value.
  • For a stepper, set the up arrow button to increase the value and the down arrow button to decrease it. Typically, this increment is one unit in each direction, but the change in value should be appropriate for the data and the use case.

Visual Specification

Sliders

Steppers

The height of the stepper is 23 px—the horizontal line separating the two arrow buttons adds 1 px.

Related Topics

Average (0 Votes)