Overview

Slider

Sliders are sliding scales that allow users to select a value or range. Sliders are always clearly labeled so users know what they are selecting.

Slider

Usage

When to use
Use sliders to allow users to select a single value or a range along a pre-defined scale, such as user preferences, settings, prices, or risk appetites. Sliders work best when an imprecise, approximate value is enough.
Single slider
Use a single slider to let users choose a single value.
Range slider
Use this when users need to set a minimum and maximum values in a range, such as a budget.
Do
Provide an input field (or two input fields for the range slider) where possible for users to key in the value directly, so that the design is more inclusive and accessible.
Don't
Avoid presenting the slider vertically in the interface.
When not to use
Don't use for binary, on/off type settings
A switch is the suitable component for such use cases.
Don't use for extremely small or large ranges
Consider alternative components that offer more suitable interactions when the range is too small (e.g. 1 to 3) or too large (e.g. 1 to 1000), such as radios or input fields.