Color

ClassPropertyColor token
.bx--slider__thumbfill$ui-05
.bx--slider__filled-trackbackground-color$ui-05
.bx--slider__trackbackground-color$ui-03
.bx--labeltext color$text-02
.bx--slider__range-labeltext color$text-01

Interactive states

ClassPropertyColor token
.bx--slider__thumb:focusborder$focus
.bx--slider__thumb:activefill$interactive-04
.bx--slider__filled-track:activebackground-color$interactive-04
.bx--label:disabledtext color$disabled-02
.bx--slider__thumb:disabledfill$disabled-02
.bx--slider__track:disabledbackground-color$disabled-02

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.

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

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

Structure and spacing measurements for slider | px / rem

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