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:

  
  1. $('.slider').slider()

Options

Name typedefault description
min float 0 minimum possible value
maxfloat 10maximum possible value
step float 1 increment step
orientationstring 'horizontal' set the orientation. Accepts 'vertical' or 'horizontal'
value float|array 5 initial value. Use array to have a range slider.
selectionstring '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'
handlestring '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.

  
  1. <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.
slideThis event is fired when the slider is dragged.
slideStop This event is fired when a dragging stops.
  
  1. $('#dp5').slider()
  2. .on('slide', function(ev){
  3. ....
  4. });

0 comments:

Post a Comment

 
Top