Slider
Overview
Use the slider component to prompt the user for a numeric value by allowing them to slide a button along a track. The slider can make it easier for the user to select one of a small set of possible values, without having to type it.
Only use a slider if the input is numeric and the set of possible input values is small.
For example, you would not use a slider to prompt for a rate input that allows any value from 0.000 to 100.000, as that’s a total of 100,101 separate values that can be entered. You would use a numeric input for that case; a slider doesn’t allow for values that fine grained.
Development
Web component development
Component reference
slider
Specify a discrete numeric value by dragging a slider
Implementation
To implement a slider, use <input type="range" />. Each browser displays this very differently, so we have re-skinned the component using CSS so it looks the same in all supported browsers.
Specify the min and max values. In an Angular application, two-way bind ngModel to the underlying number value in your view component.
Angular component development
Component reference
slider
Specify a discrete numeric value by dragging a slider
Implementation
To implement a slider, use <input type="range" />. Each browser displays this very differently, so we have re-skinned the component using CSS so it looks the same in all supported browsers.
Specify the min and max values. In an Angular application, two-way bind ngModel to the underlying number value in your view component.
Design
Figma design
| Dev Component | Design Component Name |
|---|---|
| Slider Thumb | RUI / Forms / Slider Thumb |
| Slider Track | RUI / Forms / Slider Track |
Add a slider track to your artboard. Resize its width appropriately. Do not change its height.
Then add a slider thumb above the slider track. Position the thumb where you want it to appear horizontally.
Vertically center the thumb and the track.
Adobe XD design
- Sample App - Slider
| Dev Component | Design Component Name |
|---|---|
| Slider Thumb | JHA / Forms / Slider Thumb |
| Slider Track | JHA / Forms / Slider Track |
Add a slider track to your artboard. Resize its width appropriately. Do not change its height.
Then add a slider thumb above the slider track. Position the thumb where you want it to appear horizontally.
Vertically center the thumb and the track.