About
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
- 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 € 1000
285 : 685
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){
- ....
- });
0 comments:
Post a Comment