Slider for Bootstrap bootstrap-slider.js

About

Slider component with different options

• vertical or horizontal orientation
• minimum and maxim values
• step incrementor
• range selector
• 3 shapes for handles
• touch capabale

Download

Change log

11/4/2013

Added touch events support. Just add Modernizr to your page (thaks to Tony Wallace)

Added 'formater' option to format the values before they are sent to the tooltip

07/3/2013

Fixed 'setValue'

23/2/2013

Fixed events names

16/2/2013

Initial release

Example

Basic example with custom formater

Current value: 0

Range selector, options specified via data attribute.

Filter by price interval: € 10 

285 : 685

 € 1000

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

R 

G 

B 

Vertical sliders

---

Using bootstrap-slider.js

Call the slider via javascript:

  
$('.slider').slider()
  

Options

Name	type	default	description
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 plament. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles
tooltip	string	'show'	whatever to show or hide the tooltip. Accepts: 'show' or 'hide'
handle	string	'round'	handle shape. Accepts: 'round', 'square' or 'triangle'
formater	function	returns the plain value	formater callback. Return the value wanted to be displayed in the tooltip

Markup

You can use data attributes to set up the configuration.

  
<input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after"data-slider-tooltip="hide">
  

Methods

.slider(options)

Initializes a slider.

.slider('getValue')

Get the value.

.slider('setValue', value)

Set a new value.

Events

Slider class exposes a few events for manipulating the value.

Event	Description
slideStart	This event fires when a dragging starts.
slide	This event is fired when the slider is dragged.
slideStop	This event is fired when a dragging stops.

  
$('#dp5').slider()
  
  .on('slide', function(ev){
  
    ....
    });