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

Range selector, options specified via data attribute.

Filter by price interval: € 10 € 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){
    ....
  });