Range Slider

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

This component requires Javascript to render consistently between browsers.

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 -mx--2" type="range">
  <label class="-text">5TB</label>
</div>

Achieve consistent rendering

As webkit browsers don't support an active track bar, we've created our own. You will either need a JavaScript solution for moving the a-input__thumb element and changing the size of a-input__progress, or you can use Chi's JavaScript library as it provides this functionality out of the box.

Base

<div class="a-inputWrapper">
  <input class="a-input" type="range">
  <div class="a-input__progress"></div>
  <div class="a-input__thumb"></div>
</div>

Disabled

<div class="a-inputWrapper">
  <input class="a-input" type="range" disabled>
  <div class="a-input__progress"></div>
  <div class="a-input__thumb"></div>
</div>

With Labels

<div class="m-formGroup">
  <label class="-text -mr--2">200GB</label>
  <div class="a-inputWrapper -w--100">
    <input class="a-input" type="range">
    <div class="a-input__progress"></div>
    <div class="a-input__thumb"></div>
  </div>
  <label class="-text -ml--2">5TB</label>
</div>

Radio buttons as range slider

Enable range sliders to function like radio buttons.

Monthly
1 year
2 years
3 years
> 3 years
<div class="a-inputWrapper">
  <input class="a-input" type="range" min="0" max="4" step="1">
  <div class="a-input__tick-bar">
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">Monthly</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">1 year</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">2 years</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">3 years</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">&gt; 3 years</div>
    </div>
  </div>
</div>

Disabled

Monthly
1 year
2 years
3 years
> 3 years
<div class="a-inputWrapper">
  <input class="a-input" type="range" min="0" max="4" step="1" disabled>
  <div class="a-input__tick-bar">
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">Monthly</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">1 year</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">2 years</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">3 years</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">&gt; 3 years</div>
    </div>
  </div>
</div>

Consistent rendering in WebKit browsers

Monthly
1 year
2 years
3 years
> 3 years
<div class="a-inputWrapper">
  <input class="a-input" type="range" min="0" max="4" step="1">
  <div class="a-input__tick-bar">
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">Monthly</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">1 year</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">2 years</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">3 years</div>
    </div>
    <div>
      <div class="a-input__tick"></div>
      <div class="a-input__tick-label">&gt; 3 years</div>
    </div>
  </div>
  <div class="a-input__progress"></div>
  <div class="a-input__thumb"></div>
</div>