Download
Demo
- Overview
- Documents
User Rating: 3.3/5 ( 3 votes)
Your Rating:
nstSlider is a jQuery plugin for creating accessible, customizable, touch-enabled and nice looking range sliders with lots of options/APIs.
Features
-
Single/Double handles
-
Touch-enabled
-
IE 7+ Compatibility
-
Custom Digit Rounding
-
Non linear step increments
Source: lokku.github.io
1. INCLUDE CSS AND JS FILES
<link type="text/css" rel="stylesheet" href="/dist/jquery.nstSlider.css"> <!-- Add jQuery --> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <!-- Add nstSlider.js after jQuery --> <script src="/dist/jquery.nstSlider.min.js"></script>
2. HTML
<div class="nstSlider" data-range_min="0" data-range_max="100" data-cur_min="10" data-cur_max="90"> <!-- 2.1. add data attributes for the range: the min/max values the user can select --> <!-- 2.2. add the slider values: the initial values within the range the grips should be initially set at --> <div class="highlightPanel"></div> <!-- 2.3. (optional) you can use this in combination with highlight_range if you need to, or you can just omit it. Also, you can move this element after as well if you want to highlight above the slider grips --> <div class="bar"></div> <!-- 2.4. (optional) this is the bar that fills the area between the left and the right grip --> <div class="leftGrip"></div> <!-- 2.5 the left grip --> <div class="rightGrip"></div> <!-- 2.6 (optional) the right grip. Just omit if you don't need one --> </div> <!-- These two are actually exernal to the plugin, but you are likely to need them... the plugin does the math, but it's up to you to update the content of these two elements. --> <div class="leftLabel"></div> <div class="rightLabel"></div>
3. JAVASCRIPT
$('.nstSlider').nstSlider({ "left_grip_selector": ".leftGrip", "right_grip_selector": ".rightGrip", "value_bar_selector": ".bar", "highlight": { "grip_class": "gripHighlighted", "panel_selector": ".highlightPanel" }, "value_changed_callback": function(cause, leftValue, rightValue) { $('.leftLabel').text(leftValue); $('.rightLabel').text(rightValue); }, });
4. OPTIONS
Setting Name | Type | Default | Description |
---|---|---|---|
animating_css_class | string | nst-animating | the css class to be used when the slider is to be animated (this happens when a certain min/max value is being set for example). |
touch_tolerance_value_bar_x | number | 15 | the horizontal tolerance in pixels by which a handle of the slider should be grabbed if the user touches outside the slider bar area. |
touch_tolerance_value_bar_y | number | 30 | the vertical tolerance in pixels by which a handle of the slider should be grabbed if the user touches outside the slider bar area. |
left_grip_selector | string | .nst-slider-grip-left | the selector of the left grip handle. The left grip element must exist in the page when the slider is initialized. |
right_grip_selector | string | undefined | the selector of the right grip handle. This is optional. A single handler bar is assumed if this selector is not specified. |
value_bar_selector | string | undefined | the selector of the value bar. If not specified assumes a value bar representing the selection is not wanted. |
rounding | object or number | 1 |
the rounding for a certain value displayed on the slider. It can be a fixed number or an object like:
{ '1' : '100', '10' : '1000', '50' : '10000' } |
value_changed_callback | function | function(cause, vmin, vmax) { return; } | a callback called whenever the user drags one of the handles. |
user_mouseup_callback | function | function(vmin, vmax, left_grip_moved) { return; } | a callback called whenever the mouse button pressed while dragging a slider grip is released |
user_drag_start_callback | function | function () { return; } | a callback called before the user drags one of the handles |
5. METHODS
Method Name | Parameters | Description |
---|---|---|
get_range_min | None | return the current minimum range of the slider |
get_range_max | None | return the current maximum range of the slider |
get_current_min_value | None | return the current minimum value of the slider |
get_current_max_value | None | return the current maximum value of the slider |
is_handle_to_left_extreme | None | return a boolean indicating whether or not the left handler is moved all the way to the left |
is_handle_to_right_extreme | None | return a boolean indicating whether or not the right handler is moved all the way to the right |
refresh | None | force a refresh of the slider |
disable | None | disable the slider (i.e., user cannot move the handles) |
enable | None | enable the slider (i.e., user can move the handles) |
is_enabled | None | return a boolean indicating whether or not the slider can be moved by the user |
set_position |
|
set the handles at the specified min and max values |
set_step_histogram | histogram : array of numbers | use a non-linear step increment for the slider that is stretched where the histogram provided counts more items |
unset_step_histogram | None | use a linear scale of increments for the slider |
set_range |
|
set the minimum and the maximum range of values the slider |
set_rounding | rounding: number or object | set the rounding for the slider |
get_rounding | None | return the current rounding of the slider |
teardown | None | remove all data stored in the slider |