a rangepicker element for bootstrap 2/3

rangepicker, bootstrap2, bootstrap3, bootstrap
bower install bootstrap-range


bootstrap-rangepicker Build Status

Originally began as a loose "fork" of bootstrap-slider found on by Stefan Petre.

Over time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completly different.

Please ensure that you are using this library instead of the Petre version before creating issues in the repository Issue tracker!!


Clone the repository, then run npm install r Want to use bower? bower install bootstrap-range

Then load the plugin CSS and JavaScript into your web page, and everything should work!

Remember to load the plugin code after loading the Bootstrap CSS and JQuery.

JQuery is optional and the plugin can operate with or without it.

Look below to see an example of how to interact with the non-JQuery interface.

Supported Browsers

We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!


You can see all of our API examples here.

Using bootstrap-range (with JQuery)

Create an input element and call .rangepicker() on it:

// Instantiate a rangepicker
var mySlider = $("input.rangepicker").rangepicker();

// Call a method on the rangepicker
var value = mySlider.rangepicker('getValue');

// For non-getter methods, you can chain together commands
        .rangepicker('setValue', 5)
        .rangepicker('setValue', 7);

If there is already a JQuery plugin named rangepicker bound to the namespace, then this plugin will take on the alternate namespace bootstrapRangepicker.

// Instantiate a rangepicker
var mySlider = $("input.rangepicker").bootstrapRangepicker();

// Call a method on the rangepicker
var value = mySlider.bootstrapRangepicker('getValue');

// For non-getter methods, you can chain together commands
        .bootstrapRangepicker('setValue', 5)
        .bootstrapRangepicker('setValue', 7);

Using bootstrap-rangepicker (without JQuery)

Create an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element.

// Instantiate a rangepicker
var mySlider = new Slider("input.rangepicker", {
    // initial options object

// Call a method on the rangepicker
var value = mySlider.getValue();

// For non-getter methods, you can chain together commands


Options can be passed either as a data (data-foo) attribute, or as part of an object in the rangepicker call.

Name Type Default Description
id string '' set the id of the rangepicker element when it's created
min float 0 minimum possible value
max float 10 maximum possible value
step float 1 increment step
precision float 0 The number of digits shown after the decimal. Defaults to the number of digits after the decimal of step value.
orientation string 'horizontal' set the orientation. Accepts 'vertical' or 'horizontal'
value float,array 5 initial value. Use array to have a range rangepicker.
range bool false make range rangepicker. Optional if initial value is an array. If initial value is scalar, max will be used for second value.
selection string 'before' selection placement. Accepts: 'before', 'after' or 'none'. In case of a range rangepicker, the selection will be placed between the handles
tooltip string 'show' whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always'
tooltip_separator string ':' tooltip separator
tooltip_split bool false if false show one tootip if true show two tooltips one for each handler
handle string 'round' handle shape. Accepts: 'round', 'square', 'triangle' or 'custom'
reversed bool false whether or not the rangepicker should be reversed
enabled bool true whether or not the rangepicker is initially enabled
formatter function returns the plain value formatter callback. Return the value wanted to be displayed in the tooltip
natural_arrow_keys bool false The natural order is used for the arrow keys. Arrow up select the upper rangepicker value for vertical rangepickers, arrow right the righter rangepicker value for a horizontal rangepicker - no matter if the rangepicker was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher rangepicker value, arrow down/left to the lower rangepicker value.


NOTE: Optional parameters are italisized.

Function Parameters Description
getValue --- Get the current value from the rangepicker
setValue newValue, triggerSlideEvent Set a new value for the rangepicker. If optional triggerSlideEvent parameter is true, the 'slide' event will be triggered.
destroy --- Properly clean up and remove the rangepicker instance
disable --- Disables the rangepicker and prevents the user from changing the value
enable --- Enables the rangepicker
toggle --- Toggles the rangepicker between enabled and disabled
isEnabled --- Returns true if enabled, false if disabled
setAttribute attribute, value Updates the rangepicker's attributes
getAttribute attribute Get the rangepicker's attributes
refresh --- Refreshes the current rangepicker
on eventType, callback When the rangepicker event eventType is triggered, the callback function will be invoked


Event Description
slide This event fires when the rangepicker is dragged
slideStart This event fires when dragging starts
slideStop This event fires when the dragging stops
slideEnabled This event fires when the rangepicker is enabled
slideDisabled This event fires when the rangepicker is disabled

Other Platforms & Libraries