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){
    ....
  });
eyecon.ro is using cookies to personalise content and ads, to provide social media features and to analyse our traffic. I also share information about your use of my site with my social media, advertising and analytics partners.See details

By continuing to browse the site you are agreeing to my use of cookies. ? Continue