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.

Standard

0%
Container(s) .input-range-wrap
HTML Elements input[type="range"] div.input-range-percent

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.
Don't use choices that don't fit a logical spectrum.
Don't use the control to demonstrate progress.