Range Slider
Bootstrap Range
Default Range
Use type="range" attribute and
form-range class to create a deafult 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.