[Nestoria] 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


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

"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) {

// 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; }


animating_css_classstringnst-animatingthe 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_xnumber15the 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_ynumber30the 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_selectorstring.nst-slider-grip-leftthe selector of the left grip handle. The left grip element must exist on the page when the slider is initialized.
right_grip_selectorstringundefinedthe selector of the right grip handle. This is optional. A single handler bar is assumed if this selector is not specified.
value_bar_selectorstringundefinedthe selector of the value bar. If not specified assumes a value bar representing the selection is not wanted.
roundingobject or number1the 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_handlesbooleantrueAllow handles to cross each other while one of them is being dragged. This option is ignored if just one handle is used.
value_changed_callbackfunctionfunction(cause, curMin, curMax, prevMin, prevMax) { return; }a callback is called whenever the user drags one of the handles.
user_mouseup_callbackfunctionfunction(vmin, vmax, left_grip_moved) { return; }a callback called whenever the mouse button pressed while dragging a slider grip is released
user_drag_start_callbackfunctionfunction () { return; }a callback is called before the user drags one of the handles
MethodArguments (positional)Description
get_range_minNonereturn the current minimum range of the slider
get_range_maxNonereturn the current maximum range of the slider
get_current_min_valueNonereturn the current minimum value of the slider
get_current_max_valueNonereturn the current maximum value of the slider
is_handle_to_left_extremeNonereturn a boolean indicating whether or not the left handler is moved all the way to the left
is_handle_to_right_extremeNonereturn a boolean indicating whether or not the right handler is moved all the way to the right
refreshNoneforce a refresh of the slider
disableNonedisable the slider (i.e., the user cannot move the handles)
enableNoneenable the slider (i.e., the user can move the handles)
is_enabledNonereturn a boolean indicating whether or not the slider can be moved by the user
set_positionmin: number, max: numberset the handles at the specified min and max values
set_step_histogramhistogram : array of numbersuse a non-linear step increment for the slider that is stretched where the histogram provided counts more items
unset_step_histogramNoneuse a linear scale of increments for the slider
set_rangerangeMin : number, rangeMax : numberset the minimum and the maximum range of values the slider
set_roundingrounding: number or objectset the rounding for the slider
get_roundingNonereturn the current rounding of the slider
teardownNoneremove all data stored in the slider
value_to_pxnumbergiven 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

See Demo And Download

Official Website(lokku): Click Here

This superior jQuery/javascript plugin is developed by lokku. For extra advanced usage, please go to the official website.

Related Posts


Convert An HTML File Input Type Into a Fancy File Uploader

jQuery Fancy File Uploader is a jQuery extension for converting an HTML file input type into a portable fancy file uploader. Choose from an MIT or LGPL…


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…


Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…