USER INTERFACE ELEMENTS
Slider
Overview
Sliders are intended for use in mobile, conversational UI contexts to add interactivity to an experience. Sliders allow users to enter and control a data input through sliding the target circle.
Specifications
Sliders - Variations
On Load
- Slider Button Fill Color: #333333
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto sans 16px Semi Bold
- Label Text Color: #333333
- Label Text: Noto sans 16px Regular
Keyboard Focus ADA
- Slider Button Fill Color: #FFFFFF
- Slider Button Border Color: #0061A0
- Slider Button Border Size: 4px
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Label Text Color: #333333
- Label Text: Noto Sans 16px Regular
Mobile Context Scenario
- Slider Button Fill Color: #333333
- Slider Bar (Selected): #333333
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Label Text Color: #333333
- Label Text: Noto Sans 16px Regular
Selected - Focused
- Slider Button Fill Color: #0061A0
- Slider Bar (Selected): #0061A0
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Label Text Color: #333333
- Label Text: Noto Sans 16px Regular
Selected - Active
- Slider Button Fill Color: #0061A0
- Slider Bar (Selected): #0061A0
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Label Text Color: #333333
- Label Text: Noto Sans 16px Regular
Segmented Snap - On Load
- Slider Button Fill Color: #333333
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Label Text Color: #333333
- Label Text: Noto Sans 16px Regular
Segmented Snap - Filled
- Slider Button Fill Color: #333333
- Slider Bar (Selected): #333333
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Increment Text Color: #333333
- Increment Text: Noto Sans 16px Regular
Segmented Snap - Selected Focused ADA
- Slider Button Fill Color: #333333
- Slider Bar (Selected): #0061A0
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Increment Text Color: #333333
- Increment Text: Noto Sans 16px Regular
Dark Mode
- Slider Button Fill Color: #A4CE4E
- Slider Bar (Deselected): #D9D9D6
- Value Text Color: #333333
- Value Text: Noto Sans 16px Bold
- Label Text Color: #333333
- Label Text: Noto Sans 16px Regular
Usage Guidelines
Scenario: Conversational UI
