Slider component with different options

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


Change log

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
Fixed 'setValue'
Fixed events names
Initial release


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




Vertical sliders

Using bootstrap-slider.js

Call the slider via javascript:



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


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">



Initializes a slider.


Get the value.

.slider('setValue', value)

Set a new value.


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.
  .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