node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org ยป


bootstrap-slider Build Status

A "fork" of bootstrap-slider found on originally by Stefan Petre.

Want to use this with Rails? Check it out!


Clone the repository, then run npm install

Want to use bower? bower install seiyria-bootstrap-slider


You can see all of our API examples here.

Using bootstrap-slider

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



Options can be passed either as a data (data-slider-foo) attribute, or as part of an object in the slider call. The only exception here is the formater argument - that can not be passed as a data- attribute.

Name Type Default Description
id string '' set the id of the slider element when it's created
min float 0 minimum possible value
max float 10 maximum possible value
step float 1 increment step
orientation string 'horizontal' set the orientation. Accepts 'vertical' or 'horizontal'
value float,array 5 initial value. Use array to have a range slider.
selection string 'before' selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, 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'
handle string 'round' handle shape. Accepts: 'round', 'square' or 'triangle'
reversed bool false whether or not the slider should be reversed
enabled bool true whether or not the slider is initially enabled
formater function returns the plain value formatter callback. Return the value wanted to be displayed in the tooltip


Function Description
.slider(options) Initializes the slider
.slider('getValue') Get the current value from the slider
.slider('setValue', newValue) Set a new value for the slider
.slider('destroy') Properly clean up and remove the slider instance
.slider('disable') Disables the slider and prevents the user from changing the value
.slider('enable') Enables the slider
.slider('toggle') Toggles the slider between enabled and disabled
.slider('isEnabled') Returns true if enabled, false if disabled


Event Description
slideStart This event fires when dragging starts
slide This event fires when the slider is dragged
slideStop This event fires when the dragging stops
slideChange This event fires when the slider value changes via slider.setValue()
slideEnabled This event fires when the slider is enabled
slideDisabled This event fires when the slider is disabled