role slider
Slider draft v0.1.0
Lets people pick a value in a range by moving a thumb along a track.
A slider sets a value whose position in a range matters more than its exact figure: a volume, a brightness, a price ceiling. A thumb slides along a track between a minimum and a maximum, by steps; the value can be shown next to the label. When the exact number matters, a Number field is better, alone or next to the slider.
Tokens
From packages/tokens/src/components/slider.tokens.json. Path grammar: slider.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
slider.container.gap
Between the label row and the control.
|
dimension |
{space.4}
|
4px
|
--slider-container-gap
|
slider.container.column-gap
Between the label and the value.
|
dimension |
{space.8}
|
8px
|
--slider-container-column-gap
|
Part label (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
slider.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--slider-label-color-default
|
slider.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--slider-label-color-disabled
|
slider.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--slider-label-typography-font-family--slider-label-typography-font-size--slider-label-typography-font-weight--slider-label-typography-line-height--slider-label-typography-letter-spacing
|
Part value (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
slider.value.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--slider-value-color-default
|
slider.value.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--slider-value-color-disabled
|
slider.value.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--slider-value-typography-font-family--slider-value-typography-font-size--slider-value-typography-font-weight--slider-value-typography-line-height--slider-value-typography-letter-spacing
|
Part control (11)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
slider.control.height.small
|
dimension |
{space.4}
|
4px
|
--slider-control-height-small
|
slider.control.height.medium
|
dimension |
{space.8}
|
8px
|
--slider-control-height-medium
|
slider.control.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--slider-control-border-radius
|
slider.control.background.default
|
color |
{global.bg.base.neutral.3}
|
light
#ECE8E9
dark
#282828
|
--slider-control-background-default
|
slider.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--slider-control-background-disabled
|
slider.control.min-height
Pointer target height of the whole control, whatever the track height.
|
dimension |
{space.24}
|
24px
|
--slider-control-min-height
|
slider.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--slider-control-outline-width-focus-visible
|
slider.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--slider-control-outline-offset-focus-visible
|
slider.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--slider-control-outline-color-focus-visible
|
slider.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--slider-control-transition-duration
|
slider.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--slider-control-transition-easing
|
Part thumb (10)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
slider.thumb.size.small
|
dimension |
{space.16}
|
16px
|
--slider-thumb-size-small
|
slider.thumb.size.medium
|
dimension |
{space.20}
|
20px
|
--slider-thumb-size-medium
|
slider.thumb.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--slider-thumb-border-radius
|
slider.thumb.border-width
|
dimension |
{stroke-width.md}
|
1.2px
|
--slider-thumb-border-width
|
slider.thumb.background.default
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--slider-thumb-background-default
|
slider.thumb.background.hover
|
color |
{global.bg.accent.brand.hover}
|
light
#1148A9
dark
#53D6F2
|
--slider-thumb-background-hover
|
slider.thumb.background.active
|
color |
{global.bg.accent.brand.active}
|
light
#0B2A69
dark
#41B9D3
|
--slider-thumb-background-active
|
slider.thumb.background.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--slider-thumb-background-disabled
|
slider.thumb.border-color.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--slider-thumb-border-color-default
|
slider.thumb.border-color.disabled
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--slider-thumb-border-color-disabled
|