Chi Documentation

Range Slider

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

<div class="m-formGroup">
  <label class="-text">200GB</label>
  <input class="a-input -mx2" type="range">
  <label class="-text">5TB</label>
</div>