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']
 

colpick Color Picker

Simple lightweight Photoshop-like color picker, now with touch

...

JQuery Chaos Modal

A Simple yet extendable jQuery modal script built for use with inline HTML, forms, and images

...

Viewport - simple jQuery plugin adding selectors and events for finding and handling elements in viewport

Viewport - is simple jQuery plugin adds custom pseudo-selectors and handlers for simple

...

Dialog By XDSoft

Simple dialog system

Simple dialog analogue Alert

jAlert('Hello World!!!')
...

ImgWheel

Create a responsive, configurable, endless slider from a list of images. Display content

...

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

jQuery Browser Rejection

jReject is a simple tool for rejecting specific browsers in a nice modal window

jQuery Array Utilities

Use the set operations UNION, INTERSECT, EXCEPT, known from SQL, to extract data from

...

iCheck

Highly customizable checkboxes and radio buttons (jQuery and Zepto). Features: identical inputs...

Autosize

Automatically adjust textarea height based on user input.

Vide

Easy as hell jQuery plugin for video backgrounds.

Colorbox

jQuery lightbox and modal window plugin

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bar,...

Mobiscroll Image & Text Scroller

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

jQuery Toaster

jQuery plugin for displaying customizable toast notifications via Bootstrap alerts

tmpl

A DOM element based templating engine with a logic-less Zen Coding-like markup, object caching,...

jQuery Form Tooltip

A plugin to enable animated, customisable tooltip on your form inputs when focusing.

jqEye

jQuery plugin for define a behaviour in which a HTML element moves, within the boundaries of an...

jqScrollAnim

jQuery plugin for define animations whose reproduction depends on the position of the vertical...

Linkify URLs, mentions & hashtags

Linky is a jQuery plugin for linkifying URLs, mentions (for Twitter, Instagram or GitHub) and...

jQuery JapaneseCharacter Plugin

This plug-in checks the Japanese..

EliteBox Menu

If do you need fresh menu for your project - see the EliteBox Drop-Down Menu jQuery plugin, maybe...

Simple Signup Form – jQuery Plugin

Build responsive sign up form with email notification. Provides Visual Builder and lot of...

imgix jQuery Plugin

imgix.js is a javascript library that allows you to to work with the imgix service and API to...

jQuery ScrollSlide

A plugin to run a slide animation at a specified scroll position.

jQuery helpers to assert how many elements should be in a jQuery array

jQuery helpers to help verify that your selectors are returning the expected number of elements.

image zooming plugin with a magnifier lens effect

jquery plugin for image zooming.

Smooth Scroll

Easy implementation of smooth scrolling for same-page links

jQuery.iAmIn plugin

Plugin that will set your element on a side of its parent within body (if it can) or at start of...

jQuery Circular Text

A plugin to render text along a circular path, creating a fancy button effect.

Atrribute Extend

A simple plugin that extends jQuery attribute modification similar to *Class functions

jQuery xFilterList

A simple jQuery grid list plugin for easy filter and sorting.

jQuery Price Format

jQuery plugin to convert inputs into price inputs

Google Maps Latitude and Longitude Picker

A jQuery Latitude and Longitude plugin to pick a location using Google Maps. Supports multiple...

Autocomplete like Google

Simple autocomplete like Google

Magneticmediajs jQuery: display your media content with style

Magneticmediajs is a jQuery based library that allows media content (images, videos, maps, HTML...

prmenu

jQuery plugin. Leightweight, responsive menu.

hovertree

jQuery plugin.Tree Menu.Accordion Menu.

rangeslider.js

Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input...

Easy Carousel

EasyCarousel Plugin is a very practical Carousel plug-ins written in jQuery. Used to show a set...

ABigImage – view big versions of images

Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left...

jQuery JIT image

This jQuery plugin facilitates the use of jit image manipulation on the server and medias...

TailorFit

jQuery plugin that fits and centers elements within their containers.

Visual jQuery Lightbox – Beautiful jQuery Lightbox

Visual LightBox is a web photo galleries with a nice Lightbox-style overlay effect. *...

Mimeo

A jQuery plugin for responsive images. Part of the Formstone Library.

Guillotine

Allow users to crop images within an area (fully responsive). Supports dragging (touch support),...

jQuery Slider – WOW image slider

WOW Slider is a jQuery image slider plugin with fantastic visual effects and beautifully...

Qoopido Lazyimage

jQuery plugin to lazy load images.