Open UI

Slider

Names

Anatomy

  • Slider label
  • Active fill
  • Handle
  • Track
  • Value
  • Tick marks
  • Values

Concepts

range concept on a Slider component in Ant Design.

origin concept on a Slider component in UI Fabric.

snapping concept on a Slider component in UI Fabric.

labels concept on a Slider component in FAST.

hide mark concept on a Slider component in FAST.

custom thumb concept on a Slider component in FAST.

custom labels concept on a Slider component in FAST.

error concept on a Slider component in Lightning Design System.

small concept on a Slider component in Lightning Design System.

medium concept on a Slider component in Lightning Design System.

large concept on a Slider component in Lightning Design System.

xsmall concept on a Slider component in Lightning Design System.

steps concept on a Slider component in Lightning Design System.

track concept on a Slider component in Material Components Web.

scale concept on a Slider component in Material Components Web.

restricted concept on a Slider component in Material Components Web.

Slider concept on a Slider component in Material Components Web.
range

custom marks concept on a Slider component in Material Components Web.

form concept on a Slider component in Stardust UI.

single concept on a Slider component in Ant Design.
single concept on a Slider component in Lightning Design System.

tooltip concept on a Slider component in Ant Design.
tooltip concept on a Slider component in Material Components Web.

reversed concept on a Slider component in Ant Design.
reversed concept on a Slider component in Material Components Web.

value concept on a Slider component in Boosted.
value concept on a Slider component in Lightning Design System.

mark concept on a Slider component in Ant Design.
mark concept on a Slider component in Material Components Web.
mark concept on a Slider component in WAI-ARIA.

disabled concept on a Slider component in Boosted.
disabled concept on a Slider component in FAST.
disabled concept on a Slider component in Lightning Design System.
disabled concept on a Slider component in Stardust UI.

controlled concept on a Slider component in Carbon Design System.
controlled concept on a Slider component in UI Fabric.
controlled concept on a Slider component in Material Components Web.
controlled concept on a Slider component in Stardust UI.

vertical concept on a Slider component in Ant Design.
vertical concept on a Slider component in UI Fabric.
vertical concept on a Slider component in FAST.
vertical concept on a Slider component in Lightning Design System.
vertical concept on a Slider component in Material Components Web.
vertical concept on a Slider component in Stardust UI.
vertical concept on a Slider component in WAI-ARIA.

basic concept on a Slider component in Ant Design.
basic concept on a Slider component in Boosted.
basic concept on a Slider component in Carbon Design System.
basic concept on a Slider component in UI Fabric.
basic concept on a Slider component in FAST.
basic concept on a Slider component in Lightning Design System.
basic concept on a Slider component in Material Components Web.
basic concept on a Slider component in Stardust UI.
basic concept on a Slider component in WAI-ARIA.

Additional research

Notes

While not called out explicitly, sliders usually have a min/max value.

Sliders with a filled in slide indicates whether or not the values include the preceding value. Sliders without a filled in slide indicate an individual point is selected.

Snapping behavior is supported by some sliders. That’s where there are only a select few steps and the slider jumps to those points rather than smoothly going between them.

Most sliders support a “controlled” state where a value can be entered elsewhere and the slider will move the appropriate position that accompanies the value