Chi · Range Slider

Range Slider

Range sliders work as expected without the need of any JavaScript. However, as Webkit browsers don't support custom styling for the left side of the track, we need JavaScript to achieve a consistent design in all browsers.

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

200GB

5TB

<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

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>