Skip to main contentCarbon Design System

Slider

Color

ElementPropertyColor token
Slider thumbfill$icon-primary
Trackbackground-color$border-subtle *
Track: filledbackground-color$border-inverse
Labeltext color$text-secondary
Rangel labeltext color$text-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Interactive states

ElementPropertyColor token
Thumb:focusborder$focus
Thumb:activefill$interactive
Track:activebackground-color$interactive
Label:disabledtext color$text-disabled
Thumb:disabledfill$icon-disabled
Track:disabledbackground-color$border-disabled

Typography

Slider labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.

ElementFont-size (px/rem)Font-weightType token
Label12 / 0.75Regular / 400$label-01
Range label14 / 0.875Regular / 400$code-02

Structure

The width of a slider varies based on page content and layout.

ElementPropertypx / remSpacing token
Thumbheight, width14 / 0.875
Thumb:activeheight, width20 / 1.25
Trackheight4 / 0.25
margin-left, margin-right8 / 0.5$spacing-03
Labelmargin-bottom16 / 1$spacing-05
Range labelmargin-right16 / 1$spacing-05
Structure and spacing measurements for slider

The following specs are not built into the slider component but are recommended by design as the proper sizing for the slider tracking line.

ElementPropertypx / remSpacing token
Slidermin-width200 / 12.5
max-width640 / 40