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.
Nouislider
noUiSlider is a lightweight JavaScript range slider
Basic Example
Multi elements range handle
Non linear slider
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.