Overview
Create custom <input type="range"> controls with .custom-range.
Only Firefox currently support “filling” in their track from the left of the thumb so only those browsers show that styling.
Basic range
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
<label for="disabledRange">Disabled range</label>
<input type="range" class="custom-range" disabled="" id="disabledRange">Defining min and max
Range inputs have implicit values for min and max -
0 and 100, respectfully. You may specify new values
for those using the min and max attributes.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">Defining steps
By default, range inputs “snap” to integer values. To change this, you can
specify a step value. In the example below, we double the number
of steps by using step="0.5".
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">