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>