The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Range 2D Slider : Easily customizable 2d range slider with very many options

Plugin rate :

Easily customizable 2d range slider with very many options. Maybe as usual range slider vertical or horizontal slider and two-dimensional slider

Implementation: 

Create input field

1
<input id="slider" type="text" value="5|5;3|4">

append two file

1
2
<link rel="stylesheet" type="text/css" href="jquery.range2dslider.css"/>;
<script src="jquery.range2dslider.js"></script>

and init slider

1
2
3
4
5
6
$('#slider').range2DSlider({
  value:[[1,0],[5,0]],//will be two sliders
  showRanges:[[0,1]],   //combine these two sliders
  template:'horizontal' //this is not setting a configuration setting
  //to simplify the work with the plugin
});

More options

Options: 
axis
Array
Default : [-10,-5,0,5,10] - Two-dimensional array of axis values vertically and horizontally. May comprise the initial and final value, and middle value
projections
Array
Default : false - Display projections on the axes. Maybe as an array, where each element corresponds to the slider, and one value.
Screenshots
  • 2d range slider demonstration

  • simple range slider

  • 2d slider with use projections

  • simple vertical slider

Comments

good tutorial very helpful there is another good tutorial on talkerscode.com to create range slider using jquery with demo have a look
http://talkerscode.com/webtricks/price-range-slider-using-jquery-css-and-php.php

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.8
Current version
1.0.2
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [1]