Sliders

Sliders allow users to make selections from a range of values.

Types

Inline slider

Inline sliders allow users to set and select a specific value. Multiple inline sliders can appear together on one page.

Full screen slider

Full screen sliders allow users to set and select a specific value. Full screen sliders occupy the entire viewport.

Anatomy

1. Inline slider (continuous)

A. Track progress

B. Track

C. Container

D. Icon (optional)

E. Divider

2. Inline slider (incremental)

A. Track progress

B. Track

C. Container

D. Icon (optional)

E. Divider

3. Full screen slider with buttons

A. Icon

B. Custom chip

4. Full screen slider with labels

A. Icon

B. Label

Usage

See the following examples of sliders.