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.
<div class="m-form__item">
<label class="a-label" for="range01">Range label</label>
<div class="m-input__wrapper">
<input class="a-input" type="range" id="range01">
<div class="a-input__progress"></div>
<div class="a-input__thumb"></div>
</div>
</div>
<div class="m-form__item">
<label class="a-label" for="range02">Range label</label>
<div class="m-input__wrapper">
<input class="a-input" type="range" id="range02" disabled>
<div class="a-input__progress"></div>
<div class="a-input__thumb"></div>
</div>
</div>
<div class="m-form__item">
<label class="a-label" for="range03">Range label</label>
<div class="m-input__wrapper -d--flex">
<span class="-text -mr--2">200GB</span>
<div class="m-input__wrapper -w--100">
<input class="a-input" type="range" id="range03">
<div class="a-input__progress"></div>
<div class="a-input__thumb"></div>
</div>
<span class="-text -ml--2">5TB</span>
</div>
</div>
<div class="m-form__item">
<label class="a-label" for="range04">Range label</label>
<div class="m-input__wrapper">
<input class="a-input" type="range" min="0" max="4" step="1" id="range04">
<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">> 3 years</div>
</div>
</div>
<div class="a-input__progress"></div>
<div class="a-input__thumb"></div>
</div>
</div>