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.