Skip to main content

Slider

Overview​

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Sliders can have icons on both ends of the bar that reflect a range of values.

Sliders allow users to select from discrete value ranges. Sliders can be somewhat difficult to manipulate, so they should be used when an approximate value is good enough. For known, specific value ranges, consider text inputs instead. When using sliders, consider the unit. If only whole numbers can be chosen, for example, default the slider to use whole values only.

Use when​

  • An approximate value is good enough. Sliders can be somewhat difficult to manipulate making it somewhat cumbersome to get an exact value.
  • Changes will have an immediate impact (such as in filters or volume settings).

Don't use when​

  • A user is selecting known, specific value ranges. Use text fields instead.

Types​

Continuous sliders​

Continuous sliders allow users to select a value along a subjective range.

Discrete sliders​

Discrete sliders can be adjusted to a specific value by referencing its value indicator.

Possible selections may be organized through the use of tick marks, which a slider thumb will snap to (or to which an input will round up or down).

Best practices​

check_circle_outline

Ensure that sliders have a large enough touch target for mobile contexts.

check_circle_outline

Ensure that labels will stay visible on mobile; place them above or beside where a thumb interacts with the slider.

check_circle_outline

For single-point sliders, if the user clicks at an point along the slider, the handle should jump to the appropriate value.

check_circle_outline

Providing a text input option in addition to a slider provides a helpful alternative if users have a specific value in mind.

check_circle_outline

If using sliders with filters, live update results as the slider is dragged (ie, the result list updates while the user drags the handle).

cancel

Don't use a slider for binary settings; use radio buttons instead.

Components​

Pattern​

Sliders may be used with:

  • Forms (coming soon!)
  • Faceted search (coming soon!)

Resources​