Range slider

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

Examples

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

Base

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range01">Range label</label>
  <input class="chi-input" type="range" id="range01">
</div>

<script>chi.rangeSlider(document.getElementById('range01'));</script>

Disabled

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range02">Range label</label>
  <input class="chi-input" type="range" id="range02" disabled>
</div>

<script>chi.rangeSlider(document.getElementById('range02'));</script>

Multiple Labels

200GB5TB
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range03">Range label</label>
  <div class="chi-input__wrapper -d--flex">
    <span class="-text">200GB</span>
    <input class="chi-input -mx--2" type="range" id="range03">
    <span class="-text">5TB</span>
  </div>
</div>

<script>chi.rangeSlider(document.getElementById('range03'));</script>

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 chi-input__thumb element and changing the size of chi-input__progress, or you can use Chi's JavaScript library as it provides this functionality out of the box.

Base

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range04">Range label</label>
  <div class="chi-input__wrapper">
    <input class="chi-input" type="range" id="range04">
    <div class="chi-input__progress"></div>
    <div class="chi-input__thumb"></div>
  </div>
</div>

<script>chi.rangeSlider(document.getElementById('range04'));</script>

Disabled

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range05">Range label</label>
  <div class="chi-input__wrapper">
    <input class="chi-input" type="range" id="range05" disabled>
    <div class="chi-input__progress"></div>
    <div class="chi-input__thumb"></div>
  </div>
</div>

<script>chi.rangeSlider(document.getElementById('range05'));</script>

Multiple Labels

200GB
5TB
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range06">Range label</label>
  <div class="chi-input__wrapper -d--flex">
    <span class="-text -mr--2">200GB</span>
    <div class="chi-input__wrapper -w--100">
      <input class="chi-input" type="range" id="range06">
      <div class="chi-input__progress"></div>
      <div class="chi-input__thumb"></div>
    </div>
    <span class="-text -ml--2">5TB</span>
  </div>
</div>

<script>chi.rangeSlider(document.getElementById('range06'));</script>

Radio buttons as range slider

Enable range sliders to function like radio buttons.

Monthly
1 year
2 years
3 years
> 3 years
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range07">Range label</label>
  <div class="chi-input__wrapper">
    <input class="chi-input" type="range" min="0" max="4" step="1" id="range07">
    <div class="chi-input__tick-bar">
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">Monthly</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">1 year</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">2 years</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">3 years</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">&gt; 3 years</div>
      </div>
    </div>
  </div>
</div>

<script>chi.rangeSlider(document.getElementById('range07'));</script>

Disabled

Monthly
1 year
2 years
3 years
> 3 years
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range08">Range label</label>
  <div class="chi-input__wrapper">
    <input class="chi-input" type="range" min="0" max="4" step="1" id="range08" disabled>
    <div class="chi-input__tick-bar">
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">Monthly</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">1 year</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">2 years</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">3 years</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">&gt; 3 years</div>
      </div>
    </div>
  </div>
</div>

<script>chi.rangeSlider(document.getElementById('range08'));</script>

Consistent rendering in WebKit browsers

Monthly
1 year
2 years
3 years
> 3 years
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <label class="chi-label" for="range09">Range label</label>
  <div class="chi-input__wrapper">
    <input class="chi-input" type="range" min="0" max="4" step="1" id="range09">
    <div class="chi-input__tick-bar">
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">Monthly</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">1 year</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">2 years</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">3 years</div>
      </div>
      <div>
        <div class="chi-input__tick"></div>
        <div class="chi-input__tick-label">&gt; 3 years</div>
      </div>
    </div>
    <div class="chi-input__progress"></div>
    <div class="chi-input__thumb"></div>
  </div>
</div>

<script>chi.rangeSlider(document.getElementById('range09'));</script>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon