nstSlider - Nestoria Sliders jQuery Plugin

Jun 10, 2014 in Forms 6269 views

Download

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	min: number max: number	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	rangeMin : number rangeMax : number	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

JS Tutorial