Slider
Use our custom range inputs for consistent cross-browser styling and built-in customization.
Basic
Basic slider.
<input type="range" class="form-range">
Disabled
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
<input type="range" class="form-range" disabled>
Min and max
Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.
<input type="range" class="form-range" min="0" max="5">
Step
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".
<input type="range" class="form-range" min="0" max="5" step="0.5">