Ranges
Some people call these "sliders".
Basic Range
<input type="range" class="c-range">Colours
<input type="range" class="c-range c-range--primary">
<input type="range" class="c-range c-range--secondary">
<input type="range" class="c-range c-range--success">
<input type="range" class="c-range c-range--error">
<input type="range" class="c-range" disabled>
Animation
.a-range
Apply the .a-range class to enable animation on the range handle when moving it.
--slow, --fast
Every animation comes with slow and fast modifiers.