Range Slider
Bootstrap Range
Default Range
Use type="range" attribute and form-range class to create a default range.
Disabled
Use disabled attribute on an input to give it a grayed out appearance and remove pointer events.
Min and Max
Use min and max attribute with specified range input respectively.
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" attribute.
<!-- Default Range -->
<input type="range" class="form-range" id="customRange1">
<!-- Disabled Range -->
<input type="range" class="form-range" id="disabledRange" disabled>
<!-- Min and Max -->
<input type="range" class="form-range" min="0" max="5" id="customRange2">
<!-- Steps -->
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
Nouislider
noUiSlider is a lightweight JavaScript range slider
Basic Example
Multi elements range handle
Colorpicker
Using HTML5 Input Elements
Non linear slider
Locking sliders together
Merging overlapping tooltips
Only showing tooltips when sliding handle
Moving the slider by clicking pips
Colored Connect Elements
Creating a toggle
Soft limits
Color Scheme
Primary
Use data-slider-color="primary" attribute to set primary color scheme.
Secondary
Use data-slider-color="secondary" attribute to set secondary color scheme.
Success
Use data-slider-color="success" attribute to set success color scheme.
Info
Use data-slider-color="info" attribute to set info color scheme.
Warning
Use data-slider-color="warning" attribute to set warning color scheme.
Danger
Use data-slider-color="danger" attribute to set danger color scheme.
Dark
Use data-slider-color="dark" attribute to set dark color scheme.
Sizes
Large
Use data-slider-size="lg" attribute to set large size rangeslider.
Medium
Use data-slider-size="md" attribute to set medium size data-rangeslider.
Small
Use data-slider-size="sm" attribute to set small size rangeslider.
Styling
Line Rangeslider
Use data-slider-style="line" attribute to set line rangeslider.
Circle Bordered Rangeslider
Use data-slider-style="border" attribute to set circle bordered rangeslider.
Square Rangeslider
Use data-slider-style="square" attribute to set square shape rangeslider.