Standard
0%
| Container(s) | .input-range-wrap |
| HTML Elements | input[type="range"] div.input-range-percent |
Sliders
Sliders let users select from a range of values by moving the slider handle. Sliders are ideal for adjusting settings that reflect a value from 0 to 100. Multi sliders to allow the user to set a specific value.
CSS Only
| Container(s) | .input-range-wrap |
| HTML Elements | input[type="range"] |
Multi
| Container(s) | .input-range-wrap .input-multi-range-track |
| Modifiers | .input-range-small |
| HTML Elements | input[type="radio"] label.input-multi-range-label div.input-multi-range-fill |
Guidelines
- Labels should be title case and ≤ 20 characters.
