Open UIOpen UI GitHub Discord

Slider

Anatomy

None of the Slider JSON /resources define an anatomy.

Concepts

An image of the basic concept on a Slider component in Ant Design.
An image of the basic concept on a Slider component in Carbon Design System.
An image of the basic concept on a Slider component in UI Fabric.
An image of the basic concept on a Slider component in Lightning Design System.
An image of the basic concept on a Slider component in Material Components Web.
An image of the basic concept on a Slider component in Stardust UI.
An image of the basic concept on a Slider component in WAI-ARIA.

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

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

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

An image of the single concept on a Slider component in Ant Design.
An image of the single concept on a Slider component in Lightning Design System.

An image of the tooltip concept on a Slider component in Ant Design.
An image of the tooltip concept on a Slider component in Material Components Web.

An image of the reversed concept on a Slider component in Ant Design.
An image of the reversed concept on a Slider component in Material Components Web.

An image of the disabled concept on a Slider component in Lightning Design System.
An image of the disabled concept on a Slider component in Stardust UI.

An image of the range concept on a Slider component in Ant Design.

An image of the origin concept on a Slider component in UI Fabric.

An image of the snapping concept on a Slider component in UI Fabric.

An image of the value concept on a Slider component in Lightning Design System.

An image of the error concept on a Slider component in Lightning Design System.

An image of the small concept on a Slider component in Lightning Design System.

An image of the medium concept on a Slider component in Lightning Design System.

An image of the large concept on a Slider component in Lightning Design System.

An image of the xsmall concept on a Slider component in Lightning Design System.

An image of the steps concept on a Slider component in Lightning Design System.

An image of the track concept on a Slider component in Material Components Web.

An image of the scale concept on a Slider component in Material Components Web.

An image of the restricted concept on a Slider component in Material Components Web.

An image of the Slider concept on a Slider component in Material Components Web.
range

An image of the custom marks concept on a Slider component in Material Components Web.

An image of the form concept on a Slider component in Stardust UI.

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 preceeding 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