Open UIOpen UI GitHub

Slider

Anatomy

None of the Slider JSON /resources define an anatomy.

Concepts

Show descriptions

basic

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 FastDNA.
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.

vertical

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 FastDNA.
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.

controlled

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.

range

range
Mode: Adjust Both
An image of the range concept on a Slider component in Ant Design.
An image of the range concept on a Slider component in FastDNA.
Mode: Adjust Both
An image of the range concept on a Slider component in Material Components Web.

single

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

reversed

reversed
Mode: Adjust Lower
An image of the reversed concept on a Slider component in Ant Design.
An image of the reversed concept on a Slider component in FastDNA.
Mode: Adjust Lower
An image of the reversed concept on a Slider component in Material Components Web.

mark

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.

tooltip

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.

disabled

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.

origin

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

snapping

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

value

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

error

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

small

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

medium

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

large

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

xsmall

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

steps

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

track

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

scale

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

restricted

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

custom marks

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

form

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

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