Chi · Range Sliders

Range Sliders

Range sliders are used for inputting numeric values within a range.

Examples

To render a range slider, apply the class a-input to an input type="range". Range widths are fluid by default.

Base

<input class="a-input" type="range">

Disabled

<input class="a-input" type="range" disabled>

With Labels

200GB5TB

<div class="a-formGroup -inline">
  <label class="-text -mr2">200GB</label>
  <input class="a-input" type="range">
  <label class="-text -ml2">5TB</label>
</div>