Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Slider

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

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