A slider is presented as a horizontal or vertical track, or a 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 within the range.

Partial screenshot of the Displays preferences pane with the brightness slider highlighted.

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.

Image of a horizontal slider with the circular thumb in the middle.

Linear slider without tick marks

Image of a horizontal slider with the directional thumb pointed at the fifth tick mark out of ten.

Linear slider with tick marks

Image of a circular slider with the thumb at the three o'clock position.

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. Use circular sliders 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.

Image of a horizontal linear slider without tick marks, followed by a text field and a stepper. The thumb is in the center of the slider and the text field displays 50%.

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.

Partial screenshot of the Energy Saver preferences pane, highlighted to show the slider that controls how long the display should remain on after inactivity.

Consider adding labels to tick marks 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. It's also a good idea to provide a help tag that displays the value of the thumb when users hover over it.

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.