Best Period Picker

Range2DSlider Range and Slider 2d in one jQuery plugin. Support touch devices

range2dSlider плагин на jQuery
A lot of configuration options make it one of the best plugins for make slider and range. Just look at what it can do:

 

Simple 2d slider

Show source

or usual range slider, alternative native input type="range", but with support for multiple values

Show source

Vertical variant, the same slider input type="range"

 

Show source

In tooltip over(under/to the left/to the right) slider can display not only the current values. All pretty simple customise

Show source

Do not like the look?

Show source

All that you see above is not strictly into a slider, and is a combination of a specific setting. You can create a configuration for all cases. Under the cut description of the settings and configurations, and interested can immediately download the plugin and to try it yourself


Settings

Two-dimensional array of axis values vertically and horizontally. May comprise the initial and final value, and middle value
jQuery('.slider1').range2DSlider({
  axis:[
    [-10,-5,0,5,10],
    [-10,10]
  ]
});
 

Result

Used to set the values to all runners. Number of runners is not limited. Each runner passes the value horizontally and vertically. In addition to this value can be set via the element attribute value in the format «0|0;5|5;1|6»
jQuery('.slider2').range2DSlider({
  value:[
    [0,0],
    [5,5],
    [1,6],
    [9,9],
    [10,10]
  ]
});
 

Result

Display projections on the axes. Maybe as an array, where each element corresponds to the slider, and one value.
Default: false

jQuery('.slider3').range2DSlider({
  projections:true
});
 

Result

The two-dimensional array whose elements are a pair of sliders id number that you need to connect and show it in the slider
Default: false
jQuery('.slider4').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
});
 

Result

In teh className of the main div plugin added 'xdsoft_range2dslider_'+skin1. This class is used to customize view.So far, only one skin: «xdsoft_range2dslider_skin1», but with the time add more.
Default: "skin1"
jQuery('.slider5').range2DSlider({
  skin:'myskin'
});
 
Serves the same purpose as the skin. Adds a slider to any class
Default: ""
jQuery('.slider5').range2DSlider({
  className:'myclass myclass2'
});
 
Serves the same purpose as the skin but adds slider to an arbitrary set of styles
Default: ""
jQuery('.slider6').range2DSlider({
  value:[[0,5]],
  showRanges:[[0,1]],
  style:'float:left;margin-left:25px;',
  axis:[[0,1],[0,10]],
  template:'vertical'
});

Result

 
Height slider
Default: "100px"
jQuery('.slider7').range2DSlider({
  height:'10px'
});
 
Width slider
Default: "auto"
jQuery('.slider8').range2DSlider({
  width:'30%'
});
 
Very important setting. Serves to orient the plugin on the X axis. Where to start the countdown to the left or right
Default: "left"
 
Orientation axis Y. Top-down (top) or bottom-up (bottom)
Default: "bottom"
jQuery('.slider9').range2DSlider({
  x:'right',
  y:'top'
});

Result

 
If false, then when you click on an empty place in the slider, the last active slider moves to place a click
Default: true
 
show Grid
Default: true
 
An array of two elements: 1 - step by X, 2 - step by Y in pixel. If false, is automatically calculated by the limits of the axis
Default: false
 
Style for the grid lines. The line width, color, and dashed width
Default:
{
  width:0.5,
  color:'#888',
  dashed:[5,2]
}
jQuery('.slider10').range2DSlider({
  grid:true,
  gridStep:[40,40],
  gridStyle:{
    width:1.5,
    color:'red',
    dashed:[1,2]
  }
});
 

Result

 
Round values
Default: false
 
Method for rounding
Default: Math.round
jQuery('.slider11').range2DSlider({
 round:true,
 roundMethod:function(val){return val>4?5:3;}
});
 
Show the numbers on the axes.
Default: [true,true]
jQuery('.slider').range2DSlider({
 showLegend:false,
});
 
The values on the axes are calculated and are placed only on the first call range2DSlider element. If you want to re-rendering, you need to set in true
Default: false
jQuery('.slider').range2DSlider({
   showLegend:[true,false]
});
jQuery('.slider').range2DSlider({
  showLegend:[false,false],
  recalcLegends:true
});
 
Whether to show (and if you show where) the value next to the slider. You can specify a single value for all or for each slider individually.
Default: ['top']
 
It always show tooltip. at false It will be shown only when the mouse will be over slider
Default: [true]
jQuery('.slider').range2DSlider({
 tooltip:['top','right','bottom','left'],
 value:[[2,5],[4,5],[6,5],[8,5]],
 alwShowTooltip:[true,true,true,false]
});
 

Result

 
Bind values to the point of intersection of the axes of integers. Only works when round=true
Default: false
jQuery('.slider').range2DSlider({
 template:'horizontal',
 round:true,
 onlyGridPoint:true
});
 

Result

 
Allows values go beyond axis limits. If false and axis value greater than the maximum in axis, is set to a maximum value of axis. This does not apply to Drag&Drop.
Default: false
 
Important setting. Axis in which is allowed to modify the position of the slider.
Default: 'both'
jQuery('.slider').range2DSlider({
value:[[1,1],[3,3],[5,5]],
allowAxisMove:['x','y','both']
});
 

Result

 
Method that returns that will be displayed in tooltip.
Default:
function( value ){
        return value[0].toFixed(2)+'-'+value[1].toFixed(2)
}
In this he served in the DOM element of the slider. Using it, you can turn to its child elements: tooltip or projections
jQuery('.slider').range2DSlider({
value:[5,5],
projections:true,
printLabel:function( val ){
 this.projections
  &&this.projections[0]
   .find('.xdsoft_projection_value_x')
    .text(val[1].toFixed(5));
 return val[0].toFixed(5);
}
});
 

Result

 
Method that returns that will be recorded in the value attribute of the original input.
Default method returns a similar structure: 0|1;3|7;19.56|7
jQuery('.slider').range2DSlider({
printValue:function( val ){
 return val[0].toFixed(5);
}
});
 
Setting values for the disable plugin
Default: false
 
When you click on any slider or when switching to a tab by pressing it becomes the current active. After that, its position can be changed using the keyboard arrows. In stepOnKeyNavigate is the distance the slider moves when you press one of the keys
Default: 0.1
 
Any slider, you can also assign an arbitrary class, and assign this class of special styles.
Default:['skin1','skin1']
 

jQuery Photobox

A lightweight CSS3 image gallery plugin for jQuery that is pretty to look and and easy to use.

jQuery AlignColumn

jQuery plugin for aligning columns of a table on decimal or other character.

imgLiquid

A jQuery Plugin to resize images to fit in a container.

Autocomplete like Google

Simple autocomplete like Google

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

jQuery imagesScrolling

Jquery plugin images scrolling

jQuery FocusPoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without...

jQuery Month selector

jQueryUI Widget that enables to display and select a month and year using the mm.itemselector widget

Modern Blink

Modern Blink provides the behavior of the blink tag using CSS Animations. Will fallback to jQuery...

jQuery mSlide

Simple and easy to use slider-gallery with touch support.

Animated Table Sorter

Animated Table Sorter is a simple html table sorter, with the added benefit of animating the...

jQuery conventAccordion

jQuery plugin for horizontal and/or vertical accordion.

jQuery Waterwheel Carousel

This jQuery plugin can display images with a cascading waterwheel effect.

Ezdz [izy-dizy]

A jQuery plugin to turn standard input type file into a nice drag&drop zone with validators...

jQuery Phoenix

jQuery plugin to save form fields values to Local Storage via HMTL5 Web Storage API. Lost...

appendGrid – The dynamic table input jQuery plugin

appendGrid allow you to input structured data row by row such like filling spreadsheets. It...

Zebra_Tooltips

A lightweight, highly-configurable jQuery plugin for creating simple but smart and visually...

jQuery Nice file Input

The jQuery Nice File Input Plugin provides batter looking file input HTML element, while making...

easing – easing functions for jQuery or standalone

Easing function for use with or without jQuery. In addition to the standard list of easing...

International Telephone Input

A jQuery plugin for entering international telephone numbers

A very light weight(2.5kb minified) modal window plugin which suits your basic needs.

modalBox.js is a very light weight modal window plugin packed with only most used features and...

Fotorama

A simple, stunning, powerful jQuery gallery.

plainModal

The simple jQuery Plugin for customizable modal windows.

jQuery PieTimer

A CSS3-based pie timer.

Zebra_Pin

A lightweight jQuery plugin for pinning any element to the page or to a container element

Rangy Inputs

jQuery plug-in for selection and caret manipulation within textareas and text inputs.

jQuery Number Format

Easily format numbers for display use. Replace numbers inline in a document, or return a...

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

jQuery Fullscreen

jQuery Fullscreen plugin allows you to open any element on a page in fullscreen mode without...

Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Responsive Carousel

Simple and friendly responsive carousel plugin for jQuery. This library accept any type of...

aciTree – A customizable treeview control

aciTree renders a treeview control based on a simple data structure. The tree can be lazy loaded...

Mobiscroll Image & Text Scroller

Renders a scrollable list of images with or without optional text for easy data picking on touch...

jQuery Super Labels

Give your forms a helping of awesome!

jQuery UI Size Effect

Resize an element to a specified width and height.

Parallax ImageScroll

Parallax ImageScroll is a simple and easy jQuery plugin for creating image parallax effects when...

jQuery.popLockIt

A jQuery plugin for 'locking' short content in place as the user scrolls by longer content. For...

WysiBB – Wysiwyg BBcode editor

Wysiwyg BBcode editor based on jQuery

TimeTo

Timer countdown digital clock

blueimp Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel...

Easy responsive tabs to accordion

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or...

ImgAreaSelect – image selection/cropping plugin

ImgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers...

jQuery Gridly

Gridly is a jQuery plugin that allows for dragging and dropping as well as resizing.

Alpaca Forms

Easy Forms Engine for jQuery / Bootstrap.

jQuery Form – Fancy Web Form Designer

Formoid - Super Easy jQuery Contact Forms, Online Email Form Maker. * Easy - Build any type of...

perfect-scrollbar

Tiny but perfect jquery scrollbar plugin.

BootStrap Maxlength

jQuery and Bootstrap plugin for character count on inputs

jQuery Lifestream

Show a stream of your online activity with jQuery
good