Rangepicker for Bootstrap Examples Page

Example 1:

Basic example with custom formatter and colored selected region via CSS.


###################
       HTML
###################
<input id="ex1" data-id='ex1RangePicker' type="range" data-min="0" data-max="20" data-step="1" data-value="14"/>

###################
       CSS
###################
#ex1RangePicker .rangepicker-selection {
background: #BABABA;
}

Example 2:

Range selector, options specified via data attribute.

Filter by price interval: € 10

€ 1000

  
###################
       HTML
###################
Filter by price interval: <b>€ 10</b> <input id="ex2" type="range" class="col-sm-2" value="" data-min="10" data-max="1000" data-step="5" data-value="[250,450]"/> <b>€ 1000</b>

Example 3:

Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent swhapes for the handles.


###################
       HTML
###################
<p>
<b>R</b> <input type="range" class="col-sm-2" value="" data-min="0" data-max="255" data-step="1" data-value="128" data-id="RC" id="R" data-tooltip="hide" data-handle="square" />
</p>
<p>
<b>G</b> <input type="range" class="col-sm-2" value="" data-min="0" data-max="255" data-step="1" data-value="128" data-id="GC" id="G" data-tooltip="hide" data-handle="round" />
</p>
<p>
<b>B</b> <input type="range" class="col-sm-2" value="" data-min="0" data-max="255" data-step="1" data-value="128" data-id="BC" id="B" data-tooltip="hide" data-handle="triangle" />
</p>
<div id="RGB"></div>

###################
       CSS
###################
#RGB {
height: 20px;
background: rgb(128, 128, 128);
}
#RC .rangepicker-selection {
background: #FF8282;
}
#RC .rangepicker-handle {
background: red;
}
#GC .rangepicker-selection {
background: #428041;
}
#GC .rangepicker-handle {
background: green;
}
#BC .rangepicker-selection {
background: #8283FF;
}
#BC .rangepicker-handle {
border-bottom-color: blue;
}
#R, #G, #B {
width: 300px;
}

Example 4:

Vertical RangePicker with reversed values (largest to smallest).


###################
       HTML
###################
<input id="ex4" type="range" data-min="-5" data-max="20" data-step="1" data-value="-3" data-orientation="vertical"/>

Example 5:

Destroy instance of rangepicker by calling destroy() method on rangepicker instance via JavaScript.


###################
       HTML
###################
<input id="ex5" type="range" data-min="-5" data-max="20" data-step="1" data-value="0"/>
<button id="destroyEx5RangePicker" class='btn btn-danger'>Click to Destroy</button>
###################
    JavaScript
###################
// With JQuery
$("#ex5").rangepicker();
// Without JQuery
var rangepicker = new RangePicker('#ex5');
$("#destroyEx5RangePicker").click(function() {

// With JQuery
$("#ex5").rangepicker('destroy');
// Without JQuery
rangepicker.destroy();
});

Example 6:

Able to bind to 'slide' JQuery event on rangepicker, which is triggered whenever the rangepicker is used.

Current RangePicker Value: 3


###################
       HTML
###################
<input id="ex6" type="range" data-min="-5" data-max="20" data-step="1" data-value="3"/&t
<span id="ex6CurrentRangePickerValLabel">Current RangePicker Value: <span id="ex6RangePickerVal">3</span></span>
###################
    JavaScript
###################
// With JQuery
$("#ex6").rangepicker();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6RangePickerVal").text(slideEvt.value);
});
// Without JQuery
var rangepicker = new RangePicker("#ex6");
rangepicker.on("slide", function(slideEvt) {
$("#ex6RangePickerVal").text(slideEvt.value);
});)

Example 7:

RangePickers can be enabled and disabled.

Enabled


###################
       HTML
###################
<input id="ex7" type="range" data-min="0" data-max="20" data-step="1" data-value="5" data-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
###################
    JavaScript
###################
// With JQuery
$("#ex7").rangepicker();
// Without JQuery
var rangepicker = new RangePicker("#ex7");
$("#ex7-enabled").click(function() {
if(this.checked) {
// With JQuery
$("#ex7").rangepicker("enable");
// Without JQuery
rangepicker.enable();
}
else {
// With JQuery
$("#ex7").rangepicker("disable");
// Without JQuery
rangepicker.disable();
}
});

Example 8:

Tooltip can always be displayed.


###################
       HTML
###################
<input id="ex8" data-id='ex1RangePicker' type="range" data-min="0" data-max="20" data-step="1" data-value="14"/>
###################
    JavaScript
###################
// With JQuery
$("#ex8").rangepicker({
tooltip: 'always'
});
// Without JQuery
var rangepicker = new RangePicker("#ex8", {
tooltip: 'always'
});

Example 9:

Precision (number of places after the decimal) can be specified.


###################
       HTML
###################
<input id="ex9" type="range"/>
###################
    JavaScript
###################
// With JQuery
$("#ex9").rangepicker({
precision: 2,
value: 8.115 // RangePicker will instantiate showing 8.12 due to specified precision
});
// Without JQuery
var rangepicker = new RangePicker("#ex9", {
precision: 2,
value: 8.115 // RangePicker will instantiate showing 8.12 due to specified precision
});

Example 10:

Setting custom handlers.


###################
 HTML
###################
<input id="ex10" type="range" data-handle="custom"/>
###################
JavaScript
###################
// With JQuery
$("#ex10").rangepicker({});
// Without JQuery
var rangepicker = new RangePicker("#ex10", {});
###################
 CSS
###################
.rangepicker-handle.custom {
background: transparent none;
/* You can customize the handle and set a background image */
}
/* Or display content like unicode characters or fontawesome icons */
.rangepicker-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605'; /*unicode star character*/
color: #726204;
}

Example 11:

Using a custom step interval.


###################
HTML
###################
<input id="ex11" type="range" data-handle="custom"/>
###################
JavaScript
###################
// With JQuery
$("#ex11").rangepicker({step: 20000, min: 0, max: 200000});
// Without JQuery
var rangepicker = new RangePicker("#ex11", {
step: 20000,
min: 0,
max: 200000
});

Rangepicker for Bootstrap bootstrap-range.js