Slider button
Updated:
January 30, 2020
Slider buttons are used for important functions where it is important to prevent accidental clicks.
Variations
The continuous slider is used to pick a value within a limited range.
No items found.
Component building blocks
How the component are built up and styled in both enabled and running state.
Anatomy
The slider button are built up by a track that shows the room to slide the track, and a thumb that you can drag to do the action.
Component elements
1
Track
2
Thumb
3
Label
Colors and styles
The track switches style when it is on.
Element
Color / Style name
1
Thumb
style-thumb
This is some text inside of a div block.
2
Track
style-indent
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
5
Track
This is some text inside of a div block.
Element
Color / Style name
1
Thumb
style-thumb
style-thumb
This is some text inside of a div block.
This is some text inside of a div block.
2
Track
style-indent
style-indent
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
This is some text inside of a div block.
5
Track
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Thumb
style-thumb
style-thumb
This is some text inside of a div block.
This is some text inside of a div block.
2
Track
style-indent
style-indent
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
This is some text inside of a div block.
5
Track
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Thumb
style-thumb
style-thumb
This is some text inside of a div block.
This is some text inside of a div block.
2
Track
style-indent
style-indent
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Label
This is some text inside of a div block.
This is some text inside of a div block.
5
Track
This is some text inside of a div block.
This is some text inside of a div block.
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
Specs
This component is built up by a oval slider and icons.
1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes
States
The look of the states are defined by the style.
Slider button
Component state
Element
Style
Enabled
Thumb
style-thumb-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Hover
Thumb
style-normal-hover
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Thumb
style-normal-pressed
Track
style-indent-pressed
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Thumb
style-normal-focused
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Disabled
Thumb
style-thumb-disabled
Track
style-indent-disabled
Icons
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Checked
Thumb
style-normal-enabled
Track
style-alert-running
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
