Accessible and Customizable jQuery Range Slider Plugin - nstSlider
File Size: | 151 KB |
---|---|
Views Total: | 4410 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.