States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Default | Empty track on the layer fill, filled track and white thumb | color-surface-layer-2, color-action-primary-default |
| Hover | Thumb at 110% | — |
| Dragging | Thumb at 120%, bubble visible | color-surface-inverse |
| Keyboard focus | 2 px ring and bubble | color-focus-ring |
| Disabled | Faded track and thumb | color-border-disabled |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Track thickness | 4 px | slider-track-height |
| Thumb | 20 px | slider-thumb-size |
| Touch area | 40 px | slider-hit-size |
| Thumb at the track ends | Inside the track (edge alignment) | slider-thumb-size |
| Vertical track, minimum height | 160 px | slider-vertical-min-height |
| Bubble to thumb | 8 px | space-md |
Tokens
Section titled “Tokens”Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-slider-track-height | 4px4px4px | 4px4px4px | |
--bigbang-slider-thumb-size | 20px20px20px | 20px20px20px | |
--bigbang-slider-hit-size | 40px40px40px | 40px40px40px | |
--bigbang-slider-vertical-min-height | 160px160px160px | 160px160px160px | |
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-inverse | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-shadow-raised | 0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Hover, hold | scale 1.1 and 1.2 |
motion-release-duration |
easing-spring-productive-fast |
Scale stays 1. |
| Track click, key | Thumb and filled track glide | motion-hover-duration |
easing-productive |
Shorter. |
| Dragging | No transition; follows the pointer | — | — | — |
| Value bubble | Fades and moves 2 px | motion-tooltip-enter-duration |
easing-productive-enter |
It only fades. |