Accessible and Customizable jQuery Range Slider Plugin - nstSlider

nstSlider is a jQuery plugin for creating accessible, customizable, touch-enabled and nice looking range sliders with lots of options/APIs.

Features:

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

Basic Usage:

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 markup for 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>

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

4. Add jQuery nstSlider plugin's javascript after jQuery library.

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

5. Setup 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);

6. 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; }

Change logs:

v1.0.13 (2015-07-16)

• Deal with one handle slider extremity setting

v1.0.12 (2015-06-29)

• Fix miscalculation of slider bar width

v1.0.11 (2015-04-09)

• Use outerWidth() to calculate width of handles
• Stop calling preventDefault on touch events

v1.0.10 (2015-02-09)

• Fix bug in histogram based increment steps

v1.0.9 (2015-01-24)

• Make slider draggable when mouse hits its center

v1.0.8 (2014-07-26)

• Add valueToPx to public methods

v1.0.7 (2014-07-28)

• fixed: correctly handle mouseup events with multiple sliders

v1.0.6 (2014-07-15)

• fix issue #11: calculate slider range correctly for histogram based slider

v1.0.5 (2014-07-15)

• Prevent text selection while dragging sliders
• Make sure that after dragging the browser does not start to select text on the page as well

v1.0.4 (2014-06-12)

• Fixed: floating point array lookup

v1.0.3 (2014-06-09)

• improve support for single slider without value bar for touch devices

v1.0.2 (2014-05-07)

• added keyboard support
• aria attributes for accessibility
• fixed infinite loop bug on set_histogram_step call
• fixed right single handle going through the slider
• highlight bar can now be clicked and handles will be moved

---

This awesome jQuery plugin is developed by lokku. For more Advanced Usages, please check the demo page or visit the official website.