Highly Customizable jQuery Range Slider Plugin - Range 2D Slider

File Size: 78.1 KB
Views Total: 2681
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Highly Customizable jQuery Range Slider Plugin - Range 2D Slider

Range 2D Slider is a jQuery plugin which allows turning an input box into a highly customizable 2D range slider with tooltip and Canvas based grid support.

Basic Usage:

1. Load jQuery library and the jQuery range 2D slider plugin's javascript and CSS in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery.range2dslider.css">
<script type="text/javascript" src="jquery.range2dslider.js"></script>

2. Create an input field for a basic 2D range slider.

<input id="slider">

3. Setup the plugin to render a graph grid with range sliders.

printLabel:function( val ){
return val[0].toFixed(5);

4. All the options with defaults.

axis:[[0,10],[0,10]], // Two-dimensional array of axis values vertically and horizontally.
value:[[0,0]], // Used to set the values to all runners. 

projections:false, // Display projections on the axes. 

showRanges:false, // The two-dimensional array whose elements are a pair of sliders id number that you need to connect and show it in the slider

skin:'skin1', // In the className of the main div plugin added 'xdsoft_range2dslider_'+skin1.
className:'range2dslider', // Serves the same purpose as the skin. 
style:'', // Serves the same purpose as the skin but adds slider to an arbitrary set of styles

x:'left', // Serves to orient the plugin on the X axis. 

posOnBoxClick:true, // If false, then when you click on an empty place in the slider, the last active slider moves to place a click


grid:true, // show Grid
gridStep:false, // An array of two elements: 1 - step by X, 2 - step by Y in pixel. 
gridStyle:{ // Style for the grid lines. 

round:false, // Round values
roundMethod:Math.round, // work with round==true

showLegend:[true,true], // Show the numbers on the axes.
recalcLegends:false, // The values on the axes are calculated and are placed only on the first call range2DSlider element. 

tooltip:['top'], // false, 'top','left','right','bottom'
alwShowTooltip:[true], // false,true - work only with tooltip<>false

onlyGridPoint:false, // Bind values to the point of intersection of the axes of integers. 

outOfRange:false, // Allows values go beyond axis limits.

allowAxisMove:['both'], // 'x','y','both'

printLabel:function( value ){ // Method that returns that will be displayed in tooltip.
return value[0].toFixed(2)+'-'+value[1].toFixed(2)

parseValue: function( str ){
var s = str.split(';'),i,value=[], prs = [];
for(i =0;i<s.length;i++){
prs = s[i].split('|');
prs[0] = parseFloat(prs[0]);
prs[1] = parseFloat(prs[1]);
return value;

printValue:function( value ){ // Method that returns that will be recorded in the value attribute of the original input.
var s = [],i;
for(i =0;i<value.length;i++){
if( $.isArray(value[i]) ){
return s.join(';');

disabled: false, // Setting values for the disable plugin

stepOnKey:0.1, // When you click on any slider or when switching to a tab by pressing it becomes the current active. 

runnerClassSkin:['skin1','skin1'] // Any slider, you can also assign an arbitrary class, and assign this class of special styles.

Change log:


  • add several options parseValue, timeoutRecalc and fix few bugs


  • fix css file. fix cicle change callback calling

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