Skip to main content

Anatomy

Anatomy Image
  1. Thumb
  2. Track (active)
  3. Track (inactive)
  4. Axis Label
  5. Tick (optional)
  6. Container

Default Values

Attribute Token Value
Thumb
Border Radius slider-thumb-radius 50%
Background Color slider-thumb-color-background #101923
Border Width slider-thumb-border-width 2px
Border Color slider-thumb-color-border-default #4dacff
Track (active)
Border Radius slider-track-radius 3px
Height slider-track-height-active 4px
Track (inactive)
Border Radius slider-track-radius 3px
Height slider-track-height-inactive 1px
Axis Label
Font Family font-body-3-font-family 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Size font-body-3-font-size 0.75rem
Font Weight font-body-3-font-weight 400
Line Height font-body-3-line-height calc(16 / 12)
Letter Spacing font-body-3-letter-spacing 0.005em
Text Color slider-axis-label-color-text #ffffff
Tick
Border Radius slider-tick-radius 50%
Dimension slider-tick-dimension 4px
Background Color slider-tick-color-background #4dacff

States

Single Thumb Continuous Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Single Thumb Discreet Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Dual Range Continuous Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Dual Range Discreet Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Positions

Single Thumb Continuous Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Single Thumb Discreet Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Dual Range Continuous Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Dual Range Discreet Slider

Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus

Default

Attribute Token Value
Thumb
Border Color slider-thumb-color-border-default #4dacff

Hover

Attribute Token Value
Thumb
Border Color slider-thumb-color-border-hover #92cbff

Disabled

Attribute Token Value
Container
Opacity opacity-disabled 40%

Focus

Attribute Token Value
Container
Outline color-border-focus-default #da9ce7
Border Width border-width-focus-default 1px
Outline Offset spacing-focus-default 0.125rem
Default Discrete Slider
Discrete Slider with Hover
Disabled Discrete Slider
Discrete Slider with Focus
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel