Anatomy
- Thumb
- Track (active)
- Track (inactive)
- Axis Label
- Tick (optional)
- Container
Default Values
| Attribute | Token | Value |
|---|---|---|
| Thumb | ||
| Border Radius | slider-thumb-radius | |
| Background Color | slider-thumb-color-background | |
| Border Width | slider-thumb-border-width | |
| Border Color | slider-thumb-color-border-default | |
| Track (active) | ||
| Border Radius | slider-track-radius | |
| Height | slider-track-height-active | |
| Track (inactive) | ||
| Border Radius | slider-track-radius | |
| Height | slider-track-height-inactive | |
| Axis Label | ||
| Font Family | font-body-3-font-family | |
| Font Size | font-body-3-font-size | |
| Font Weight | font-body-3-font-weight | |
| Line Height | font-body-3-line-height | |
| Letter Spacing | font-body-3-letter-spacing | |
| Text Color | slider-axis-label-color-text | |
| Tick | ||
| Border Radius | slider-tick-radius | |
| Dimension | slider-tick-dimension | |
| Background Color | slider-tick-color-background |
States
Single Thumb Continuous Slider
Single Thumb Discreet Slider
Dual Range Continuous Slider
Dual Range Discreet Slider
Positions
Single Thumb Continuous Slider
Single Thumb Discreet Slider
Dual Range Continuous Slider
Dual Range Discreet Slider
Default
| Attribute | Token | Value |
|---|---|---|
| Thumb | ||
| Border Color | slider-thumb-color-border-default |
Hover
| Attribute | Token | Value |
|---|---|---|
| Thumb | ||
| Border Color | slider-thumb-color-border-hover |
Disabled
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Opacity | opacity-disabled |
Focus
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Outline | color-border-focus-default | |
| Border Width | border-width-focus-default | |
| Outline Offset | spacing-focus-default |