Skip to main contentCarbon Design System

Slider

Color

ClassPropertyColor token
.bx--slider__thumbfill$icon-primary
.bx--slider__filled-trackbackground-color$border-inverse
.bx--slider__trackbackground-color$border-subtle *
.bx--labeltext color$text-secondary
.bx--slider__range-labeltext color$text-primary

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

Interactive states

ClassPropertyColor token
.bx--slider__thumb:focusborder$focus
.bx--slider__thumb:activefill$interactive
.bx--slider__filled-track:activebackground-color$interactive
.bx--label:disabledtext color$text-disabled
.bx--slider__thumb:disabledfill$icon-disabled
.bx--slider__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.

ClassPropertypx / remSpacing token
.bx--slider__thumbheight, width14 / 0.875–
.bx--slider__thumb:activeheight, width20 / 1.25–
.bx--slider__trackheight4 / 0.25–
.bx--labelmargin-bottom16 / 1$spacing-05
.bx--slider__trackmargin-left, margin-right8 / 0.5$spacing-03
.bx--slider__range-label:last-of-typemargin-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.

ClassPropertypx / remSpacing token
.bx--slider-trackmin-width200 / 12.5–
.bx--slider-trackmax-width640 / 40–