Back to components

Slider

The Slider Component allows users to enter a value within constrained range.

CSS Component

CSS component

Slider Data

0

100

Table of Contents

Edit this section

Usage

Principles

Sliders can have 2 states:

initialized (where a slider value is already set, and it shows progress);
uninitialized (slider is at its default state, with thumb resting at the middle, no progress is shown);

Initialized

Slider Data

0

100

Uninitialized

Slider Data

0

100

Edit this section

Anatomy

Slider Data

0

100

Label element
Slider without initial value set
Min value label
Max value label

Edit this section

Specs

Slider Data

0

100

Sizing

Slider data label has 1rem (16px) bottom margin.

Height of slider is 2rem (32px).

Descriptive slider value labels have aline height of 1.75rem (28px) and are positioned right under the slider element.

Edit this section