Color / States
Rest
The default or normal appearance when it's not being interacted with.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
CompoundBrandBackground.Rest |
#295CAD |
|
(2) Thumb inner |
CompoundBrandBackground.Rest |
#295CAD |
|
(3) Thumb outer |
Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Rest |
#FFFFFF #E4E7E7 |
|
(4) Rail fill |
NeutralStrokeAccessible.Rest |
#626A6A |
Hover
The hover state refers to the visual and interactive changes that occurs when a user moves their cursor over the thumb but doesn't click to move it. This temporary interaction includes a color change, providing feedback to the user.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
CompoundBrandBackground.Hover |
#19458B |
|
(2) Thumb inner |
CompoundBrandBackground.Hover |
#19458B |
|
(3) Thumb outer |
Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Rest |
#FFFFFF #E4E7E7 |
|
(4) Rail fill |
NeutralStrokeAccessible.Rest |
#626A6A |
Pressed
The pressed state refers to the visual and interactive changes that occur when a user holds down on the thumb.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
CompoundBrandBackground.Pressed |
#0C3069 |
|
(2) Thumb inner |
CompoundBrandBackground.Pressed |
#0C3069 |
|
(3) Thumb outer |
Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Rest |
#FFFFFF #E4E7E7 |
|
(4) Rail fill |
NeutralStrokeAccessible.Rest |
#626A6A |
Disabled
When the component is temporarily inactive or unresponsive to user interaction. In this state, the thumb appears grayed out to visually indicate that it cannot be moved.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
NeutralForegroundDisabled.Rest |
#AFB6B6 |
|
(2) Thumb inner |
NeutralForegroundDisabled.Rest |
#AFB6B6 |
|
(3) Thumb outer |
Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Rest |
#FFFFFF #E4E7E7 |
|
(4) Rail fill |
TransparentStrokeDisabled.Rest |
#FFFFFF 0% |
Focus
The focus state occurs when it is highlighted, indicating that it is currently selected or in focus. This state is often triggered when a user tabs through interactive elements on a webpage or app, providing a visual cue that it's ready to be activated or clicked. It helps users navigate and interact with the interface, especially for those who rely on keyboard navigation or assistive technologies.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
CompoundBrandBackground.Rest |
#295CAD |
|
(2) Thumb inner |
CompoundBrandBackground.Rest |
#295CAD |
|
(3) Thumb outer |
Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Rest |
#FFFFFF #E4E7E7 |
|
(4) Rail fill |
NeutralStrokeAccessible.Rest |
#626A6A |
|
(5) Focus ring |
StrokeFocus1.Rest Outer stroke: StrokeFocus2.Rest |
#295CAD #FFFFFF |
Size options
Delish has 2 sizes of a slider: small and medium. The default is medium.
Specs by size
|
|
Design token |
Value |
|---|---|---|
|
Slider height |
N/A |
24px |
|
Tick mark width |
N/A |
1px |
|
(1) Track / Rail radius |
borderRadiusSmall |
2px |
|
(2) Handle |
N/A |
18px × 18px |
|
|
Design token |
Value |
|---|---|---|
|
Slider height |
|
24px |
|
Tick mark width |
|
1px |
|
(1) Track / Rail radius |
Global.Corner.Radius.20 Alias: Small |
2px |
|
(2) Handle |
|
14px × 14px |