🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Fully customizable with CSS, Single/Double handles, Touch-enabled, IE 7+ Compatibility, Custom Digit Rounding, Non linear step increments!

Plugins

Documentation

jquery.nstSlider.js

Fully customizable with CSS, Single/Double handles, Touch-enabled, IE 7+ Compatibility, Custom Digit Rounding, Non linear step increments!

Build Status

Example

Initialize with:

$(".mySlider").nstSlider({     "left_grip_selector": ".leftGrip",     "right_grip_selector": ".rightGrip",     "value_bar_selector": ".bar",     "value_changed_callback": function(cause, minValue, maxValue, prevMinValue, prevMaxValue) {         // show the suggested values in your min/max labels elements     } });

Method call:

$(".mySlider").nstSlider("set_position", 10 /* min */, 90 /* max */);

Destroy with:

$(".mySlider").nstSlider("teardown");

Demo

For live demos please visit the project webpage:

http://lokku.github.io/jquery-nstslider/

For a Quick Start have a look at the source html of the following file:

https://github.com/lokku/jquery-nstslider/blob/master/demo/index.html

Options

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

Methods

When calling methods, use positional arguments. For example, for the set_position method, call:

$(".mySlider").nstSlider("set_position", 10 /* min */, 90 /* max */);

do not call:

$(".mySlider").nstSlider("set_position", { min: 10, max: 90 });

unless the documentation says that the first argument is an object.

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., 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
value_to_px number given a value in the range of the slider, returns the corresponding value in pixel relative to the slider width

Dependencies

jQuery 1.6.4+

License

Copyright (c) 2014 Lokku Ltd.

Licensed under the MIT license.


You May Also Like