Skip to main content

Color

ClassAttributeSCSSHEX
.bx--slider__thumbfill$brand-01#3d70b2
.bx--slider__filled-trackbackground-color$brand-01#3d70b2
.bx--slider__trackbackground-color$ui-04#5a6872
.bx--labelcolor$text-01#152935
.bx--slider__range-labelcolor$text-02#5a6872

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 style
.bx--label14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--slider__range-label14 / 0.875Normal / 400-

Structure

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

ClassPropertypx / remSpacing token
.bx--slider__thumbheight, width24 / 1.5-
.bx--slider__trackheight4 / 0.25-
.bx--labelmargin-bottom8 / 0.5$spacing-xs
.bx--slidermargin-left, margin-right16 / 1$spacing-md
.bx--slider__range-label:last-of-typemargin-right16 / 1$spacing-md

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-