Skip to main contentCarbon Design System



ClassPropertyColor token
.bx--labeltext color$text-02
.bx--slider__range-labeltext color$text-01

Interactive states

ClassPropertyColor token
.bx--label:disabledtext color$disabled-02


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.

ClassFont-size (px/rem)Font-weightType token
.bx--label12 / 0.75Regular / 400$label-01
.bx--slider__range-label14 / 0.875Regular / 400$body-short-01


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