Skip to main content

Slider

A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes.

Best practices​

Layout​

  • Don't use a continuous slider if the range of values is large.
  • Don't use a range with fewer than three values.
  • Sliders are typically horizontal but can be vertical, when needed.

Content​

  • Include a label indicating what value the slider changes.
  • Use points if you don't want the slider to allow arbitrary values between minimum and maximum.

Slider​

States​

Transitions​

TransitionsFront ViewIsometric View
Appear--
Enter--
Exit--
Interact--
Disappear--