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
<div class="input-range-wrap">
<input id="input-range-example" type="range" min="0" max="100" value="0">
<div class="input-range-percent">0%</div>
</div>
view raw range-js.html hosted with ❤ by GitHub

CSS Only

Container(s) .input-range-wrap
HTML Elements input[type="range"]
<div class="input-range-wrap">
<input type="range" min="0" max="100" value="0">
</div>
view raw range-css.html hosted with ❤ by GitHub

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
<div class="input-range-wrap" id="teammate-api-key">
<div class="input-multi-range is-selected">
<input type="radio" name="teammate-api-key-access" id="api-key-no-access" value="No Access" checked>
<label class="input-multi-range-label" for="api-key-no-access">No Access</label>
</div>
<div class="input-multi-range">
<input type="radio" name="teammate-api-key-access" id="api-key-read-access" value="Read Access">
<label class="input-multi-range-label" for="api-key-read-access">Read Access</label>
</div>
<div class="input-multi-range">
<input type="radio" name="teammate-api-key-access" id="api-key-full-access" value="Full Access">
<label class="input-multi-range-label" for="api-key-full-access">Full Access</label>
</div>
<div class="input-multi-range-track">
<div class="input-multi-range-fill"></div>
</div>
</div>

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.