Fully Customizable with CSS, Single/Double Handles Sliders jQuery Plugin

jquery.nstSlider.js is fully customized with CSS, single/double handles, touch-based, IE 7+ compatibility, approximation designated numbers, and non-linear step increases!

jquery range slider with min and max, jquery range slider with 2 handles, jquery range slider with steps, range slider with custom steps, range slider jquery with value

Features:

Keyboard Support
ARIA-enabled
Fully customizable through CSS
Single/Double handles
Touch-enabled
IE 7+ Compatibility
Custom Digit Rounding
Non-linear step increments

How to make use of it:

1. Include the required CSS file in the head section of the document.

<link type="text/css" rel="stylesheet" href="dist/jquery.nstSlider.css">

2. Write a mark on the range slider.

<div class="nstSlider" 

<!-- Add data attributes for the range: the min/max values the user can select -->
<!-- Add the slider values: the initial values within the range the grips should be initially set at -->
data-range_min="0" data-range_max="100"   
data-cur_min="10"  data-cur_max="90">


<!-- (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="highlightPanel"></div>

<!-- (optional) this is the bar that fills the
area between the left and the right grip -->
<div class="bar"></div>

<!-- The left grip -->
<div class="leftGrip"></div>

<!-- (optional) the right grip. Just omit if 
you don't need one --> 
<div class="rightGrip"></div>

</div>

<div class="leftLabel"></div>
<div class="rightLabel"></div>

3. Add JavaScript JavaScript JQUERY NSTSLIDER Library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dist/jquery.nstSlider.min.js"></script>

4. Prepare the range slider.

$('.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);
},
});

// Call methods and such...
var highlightMin = Math.random() * 20,
highlightMax = highlightMin + Math.random() * 80;
$('.nstSlider').nstSlider('highlight_range', highlightMin, highlightMax);

5. Default settings.

'animating_css_class' : 'nst-animating',
// this is the distance from the value bar by which we should
// grab the left or the right handler.
'touch_tolerance_value_bar_y': 30,  // px
'touch_tolerance_value_bar_x': 15,  // px
// where is the left grip?
'left_grip_selector': '.nst-slider-grip-left',
// where is the right grip?
// undefined = (only left grip bar)
'right_grip_selector': undefined,

// Specify highlight like this if you want to highlight a range
// in the slider.
//
// 'highlight' : {
//     'grip_class' : '.nsti-slider-hi',
//     'panel_selector' : '.nst-slider-highlight-panel'
// },
'highlight' : undefined,

// Lets you specify the increment rounding for the slider handles
// for when the user moves them.
// It can be a string, indicating a fixed increment, or an object
// indicating the increment based on the value to be rounded.
//
// This can be specified in the following form: {
//    '1' : '100',    
//    '10' : '1000',  /* rounding = 10 for values in [100-999] */
//    '50' : '10000',
// }
'rounding': undefined,

// if the bar is not wanted
'value_bar_selector': undefined,

// Allow handles to cross each other while one of them is being
// dragged. This option is ignored if just one handle is used.
'crossable_handles': true,

// Callbacks
'value_changed_callback': function(/*cause, vmin, vmax*/) { return; },
'user_mouseup_callback' : function(/*vmin, vmax, left_grip_moved*/) { return; },
'user_drag_start_callback' : function () { return; }

Options

Option	Type	Default	Description
animating_css_class	string	nst-animating	the css class is 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 on 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. This rounds the values returned in the value_changed_callback as roundedValue : int(actualValue / rounding) * rounding. The rounding parameter can be a number (i.e., fixed rounding) or can depend on actualValue (i.e., dynamic rounding). To perform dynamic rounding an object must be passed instead of a value. For example, passing rounding : { ‘1’ : ‘100’, ’10’ : ‘1000’, ’50’ : ‘10000’ } will use rounding = 1 when actualValue <= 100, rounding = 10 when 100 < actualValue <= 1000 and so on…
crossable_handles	boolean	true	Allow handles to cross each other while one of them is being dragged. This option is ignored if just one handle is used.
value_changed_callback	function	function(cause, curMin, curMax, prevMin, prevMax) { return; }	a callback is 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 is called before the user drags one of the handles

Method	Arguments (positional)	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., the user cannot move the handles)
enable	None	enable the slider (i.e., the 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
value_to_px	number	given a value in the range of the slider, returns the corresponding value in pixel relative to the slider width

accessible and customizable jquery range slider, jquery.nstSlider.js Plugin/Github, jquery range slider change event, jquery range slider with labels