Range slider
Examples
To render a range slider, apply the class chi-range-slider 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-range-slider" 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-range-slider" 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-range-slider -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-range-slider" 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-range-slider" 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-range-slider" 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.
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-range-slider" 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">> 3 years</div>
</div>
</div>
</div>
</div>
<script>chi.rangeSlider(document.getElementById('range07'));</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="range08">Range label</label>
<div class="chi-input__wrapper">
<input class="chi-range-slider" 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">> 3 years</div>
</div>
</div>
</div>
</div>
<script>chi.rangeSlider(document.getElementById('range08'));</script>
Consistent rendering in WebKit browsers
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-range-slider" 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">> 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