Sliders

A slider is presented as a horizontal track, vertical track, or circular dial that lets the user make a fine grained selection within a range of values. A slider contains a control called a thumb, which the user can click and drag to move between a minimum and maximum value, such as volume level or position during media playback. A slider can also include tick marks, making it easier for the user to pinpoint a specific value in the range.

In a linear slider without tick marks, the thumb is round and the portion of track between the minimum value and the thumb is filled with color. In a linear slider with tick marks, the thumb is directional—pointing toward the tick marks—and the track isn’t tinted. A linear slider often includes supplementary icons that illustrate the meaning of the minimum and maximum values.

In a circular slider, the thumb appears as a small circle. Tick marks, when enabled, appear as evenly spaced dots around the circumference of the slider.

Linear slider without tick marks

Linear slider with tick marks

Circular slider

Consider giving live feedback as the value of a slider changes. Live feedback shows the user results in real time. For example, your Dock icons are dynamically scaled when adjusting the Size slider in Dock preferences.

Choose an intuitive slider style that matches expectations. A horizontal slider is ideal when moving between a fixed starting and ending point. For example, a graphics app might offer a horizontal slider for setting the opacity level of an object between 0 and 100 percent. Circular sliders are more appropriate when values repeat or continue indefinitely. For example, a graphics app might use a circular slider to adjust the rotation of an object between 0 and 360 degrees. Or, an animation app might use a circular slider to adjust how many times an object spins when animated—four complete rotations equals four spins, or 1440 degrees of rotation.

Consider using a label to introduce a slider. Generally, labels should use title-style capitalization and end with a colon. For related guidance, see Labels.

Consider supplementing a slider with a corresponding text field and stepper. Especially when a slider represents a wide range of values, the user may appreciate seeing the exact slider value and having the ability to enter a very specific value. For related guidance, see Text Fields and Steppers.

Use tick marks to increase clarity and accuracy. Tick marks help the user understand the scale of measurements and make it easier to locate specific values.

Consider adding labels to tick mark for even greater clarity. Labels could be numbers or words, depending on the slider's values. It’s unnecessary to label every tick mark unless doing so is needed to reduce confusion. In many cases, labeling only the minimum and maximum values is sufficient. When the values of the slider are nonlinear, like in the Energy Saver preference pane, periodic labels provide context.

Don’t reverse the direction of a slider. Users expect the minimum and maximum sides of sliders to be consistent in all apps. For example, the user should always move a vertical volume slider upward for greater volume and downward for lower volume.

Consider using icons to illustrate the meaning of the minimum and maximum values in a linear slider. A slider that adjusts image size, for example, could show a small image icon on one side of the slider and a large image icon on the other.

For developer guidance, see NSSlider.