jquery-nouislider-rails 3.2.1 → 4.0.1

data/README.md

@@ -18,15 +18,11 @@ And then execute:
 In your app/assets/javascript manifest file:
     //=require jquery.nouislider
 
-In your app/assets/stylesheets manifest file, you can include either of the default slider styles:
-
-    //=require 'nouislider.fox.css'
-
-or
-
-    //=require 'nouislider.space.css'
+In your app/assets/stylesheets manifest file:
+    //=require jquery.nouislider
 
-You are encouraged to use your own stylesheet, but these two will give you a good base to start from.
+You are encouraged to use your own stylesheet. The styles for 4.0 have change significantly. 
+A reference is here: http://refreshless.com/nouislider/slider-design-styles
 
 ## Contributing
 

data/lib/jquery-nouislider-rails/version.rb

@@ -1,7 +1,7 @@
 module Jquery
   module Nouislider
     module Rails
-      VERSION = "3.2.1"
+      VERSION = "4.0.1"
     end
   end
 end

data/vendor/assets/javascripts/jquery.nouislider.js

@@ -1,364 +1,826 @@
-/* noUiSlider 3.2.1 */
-(function ($) {
-
-	$.fn.noUiSlider = function (options, flag) {
-
-		// test for mouse, pointer or touch
-		var EVENT = window.navigator.msPointerEnabled ? 2 : 'ontouchend' in document ? 3 : 1;
-		if (window.debug && console) {
-			console.log(EVENT);
-		}
-
-		// shorthand for test=function, calling
-		function call(f, scope, args) {
-			if (typeof f === "function") {
-				f.call(scope, args);
+/* noUiSlider 4.0.0 */
+(function($, UNDEF){
+
+	$.fn.noUiSlider = function( options ){
+
+		var  namespace = '.nui'
+			// Create a shorthand for document event binding
+			,all = $(document)
+			// Create a map of touch and mouse actions
+			,actions = {
+				 start: 'mousedown' + namespace + ' touchstart' + namespace
+				,move: 'mousemove' + namespace + ' touchmove' + namespace
+				,end: 'mouseup' + namespace + ' touchend' + namespace
 			}
-		}
-
-		// function wrapper for calculating to and from range values
-		var percentage = {
-			to : function (range, value) {
-				value = range[0] < 0 ? value + Math.abs(range[0]) : value - range[0];
-				return (value * 100) / this._length(range);
-			},
-			from : function (range, value) {
-				return (value * 100) / this._length(range);
-			},
-			is : function (range, value) {
-				return ((value * this._length(range)) / 100) + range[0];
-			},
-			_length : function (range) {
-				return (range[0] > range[1] ? range[0] - range[1] : range[1] - range[0]);
+			// Make a copy of the current val function.
+			,$VAL = $.fn.val
+			// Define a set of standard HTML classes for
+			// the various structures noUiSlider uses.
+			,clsList = [
+				 'noUi-base'		// 0
+				,'noUi-origin'		// 1
+				,'noUi-handle'		// 2
+				,'noUi-input'		// 3
+				,'noUi-active'		// 4
+				,'noUi-state-tap'	// 5
+				,'noUi-target'		// 6
+				,'-lower'			// 7
+				,'-upper'			// 8
+				,'noUi-connect'		// 9
+				,'noUi-vertical'	// 10
+				,'noUi-horizontal'	// 11
+				,'handles'			// 12
+				,'noUi-background'	// 13
+				,'noUi-z-index'		// 14
+			]
+			,stdCls = {
+				 base: [clsList[0], clsList[13]]
+				,origin: [clsList[1]]
+				,handle: [clsList[2]]
 			}
+			,percentage = {
+				to : function (range, value) {
+					value = range[0] < 0 ? value + Math.abs(range[0]) : value - range[0];
+					return (value * 100) / this._length(range);
+				},
+				from : function (range, value) {
+					return (value * 100) / this._length(range);
+				},
+				is : function (range, value) {
+					return ((value * this._length(range)) / 100) + range[0];
+				},
+				_length : function (range) {
+					return (range[0] > range[1] ? range[0] - range[1] : range[1] - range[0]);
+				}
+			};
+
+		if ( window.navigator.msPointerEnabled ) {
+			actions = {
+				 start: 'MSPointerDown' + namespace
+				,move: 'MSPointerMove' + namespace
+				,end: 'MSPointerUp' + namespace
+			};
+		}
+		
+		function __sp ( e ) {
+			e.stopPropagation();
 		}
 
-		// bounce handles of eachother, the edges of the slider
-		function correct(proposal, slider, handle) {
-
-			var
-			setup = slider.data('setup'),
-			handles = setup.handles,
-			settings = setup.settings,
-			pos = setup.pos;
-
-			proposal = proposal < 0 ? 0 : proposal > 100 ? 100 : proposal;
-
-			if (settings.handles == 2) {
-				if (handle.is(':first-child')) {
-					var other = parseFloat(handles[1][0].style[pos]) - settings.margin;
-					proposal = proposal > other ? other : proposal;
-				} else {
-					var other = parseFloat(handles[0][0].style[pos]) + settings.margin;
-					proposal = proposal < other ? other : proposal;
+		function call ( f, scope, args ) {
+			$.each(f,function(i,q){
+				if (typeof q === "function") {
+					q.call(scope, args);
 				}
+			});
+		}
+		
+		function blocked ( e ) {
+			 return ( e.data.base.data('target').is('[class*="noUi-state-"], [disabled]') );
+		}
+		
+		function fixEvent ( e, preventDefault ) {
+
+			// Required (in at the very least Chrome) to prevent
+			// scrolling and panning while attempting to slide.
+			// The tap event also depends on this.
+			if( preventDefault ) {
+				e.preventDefault();
 			}
-
-			if (settings.step) {
-				var per = percentage.from(settings.range, settings.step);
-				proposal = Math.round(proposal / per) * per;
+		
+			var  jQueryEvent = e
+				,touch = e.type.indexOf('touch') === 0
+				,mouse = e.type.indexOf('mouse') === 0
+				,pointer = e.type.indexOf('MSPointer') === 0
+				,x,y;
+			
+			e = e.originalEvent;
+			
+			if (touch) {
+				x = e.changedTouches[0].pageX;
+				y = e.changedTouches[0].pageY;
 			}
-
-			return proposal;
-
-		}
-
-		// get standarised clientX and clientY
-		function client(f) {
-			try {
-				return [(f.clientX || f.originalEvent.clientX || f.originalEvent.touches[0].clientX), (f.clientY || f.originalEvent.clientY || f.originalEvent.touches[0].clientY)];
-			} catch (e) {
-				return ['x', 'y'];
+			if (mouse) {
+	
+				// Polyfill the pageXOffset and pageYOffset 
+				// variables for IE7 and IE8;
+				if(window.pageXOffset === UNDEF){
+					window.pageXOffset = document.documentElement.scrollLeft;
+					window.pageYOffset = document.documentElement.scrollTop;
+				}
+			
+				x = e.clientX + window.pageXOffset;
+				y = e.clientY + window.pageYOffset;
 			}
+			if (pointer) {
+				x = e.pageX;
+				y = e.pageY;
+			}
+			
+			return { pass: jQueryEvent.data, e:e, x:x, y:y, t: [touch, mouse, pointer] };
+
 		}
 
-		// get native inline style value in %
-		function place(handle, pos) {
-			return parseFloat(handle[0].style[pos]);
+		function getPercentage( a ){
+			return parseFloat(this.style[a]);
 		}
+		
+		function test ( o, set ){
 
-		// simplified defaults
-		var defaults = {
-			handles : 2,
-			serialization : {
-				to : ['', ''],
-				resolution : 0.01
+			// checks is number is numerical
+			function num(e){
+				return !isNaN(e) && isFinite(e);
+			}
+			function ser(r){
+				return ( r instanceof $ || typeof r === 'string' || r === false );
 			}
-		};
-
-		// contains all methods
-		methods = {
-			create : function () {
-
-				return this.each(function () {
 
-					// set handle to position
-					function setHandle(handle, to, slider) {
-						handle.css(pos, to + '%').data('input').val(percentage.is(settings.range, to).toFixed(res));
+			
+	/**
+			These tests are structured with an item for every option available.
+			Every item contains an 'r' flag, which marks a required option, and
+			a 't' function, which in turn takes some arguments:
+			- a reference to options object
+			- the value for the option
+			- the option name (optional);
+			The testing function returns false when an error is detected,
+			or true when everything is OK. Every test also has an 'init'
+			method which appends the parent object to all children.
+	**/
+			var TESTS = {
+				 "handles": {
+					 r: true // has default
+					,t: function(o,q){
+						q = parseInt(q, 10);
+						return ( q === 1 || q === 2 );
 					}
-
-					var
-					settings = $.extend(defaults, options),
-					// handles
-					handlehtml = '<a><div></div></a>',
-					// save this to variable, // allows identification
-					slider = $(this).data('_isnS_', true),
-					// array of handles
-					handles = [],
-					// the way the handles are positioned for this slider, top/left
-					pos,
-					// for quick orientation testing and array matching
-					orientation,
-					// append classes
-					classes = "",
-					// tests numerical
-					num = function (e) {
-						return !isNaN(parseFloat(e)) && isFinite(e);
-					},
-					// counts decimals in serialization, sets default
-					split = (settings.serialization.resolution = settings.serialization.resolution || 0.01).toString().split('.'),
-					res = split[0] == 1 ? 0 : split[1].length;
-
-					settings.start = num(settings.start) ? [settings.start, 0] : settings.start;
-
-					// logs bad input values, if possible
-					$.each(settings, function (a, b) {
-
-						if (num(b)) {
-							settings[a] = parseFloat(b);
-						} else if (typeof b == "object" && num(b[0])) {
-							b[0] = parseFloat(b[0]);
-							if (num(b[1])) {
-								b[1] = parseFloat(b[1]);
+				}
+				,"range": {
+					 r: true
+					,t: function(o,q,w){
+						if(q.length!==2){
+							return false;
+						}
+						q = [parseFloat(q[0]),parseFloat(q[1])];
+						if(!num(q[0])||!num(q[1])){
+							return false;
+						}
+						o[w]=q;
+						return true;
+					}
+				 }
+				,"start": {
+					 r: true
+					,t: function(o,q,w){
+						if(o.handles === 1){
+							if($.isArray(q)){
+								q=q[0];
 							}
+							q = parseFloat(q);
+							o.start = [q];
+							return num(q);
 						}
+						return this.parent.range.t(o,q,w);
+					}
+				}
+				,"connect": {
+					 t: function(o,q){
+						return (   q === true
+								|| q === false
+								|| ( q === 'lower' && o.handles === 1)
+								|| ( q === 'upper' && o.handles === 1));
+					 }
+				}
+				,"orientation": {
+					 t: function(o,q){
+						return ( q === "horizontal" || q === "vertical" );
+					}
+				}
+				,"margin": {
+					 r: true // has default
+					,t: function(o,q,w){
+						q = parseFloat(q);
+						o[w]=q;
+						return num(q);
+					}
+				}
+				,"serialization": {
+					 r: true // has default
+					,t: function(o,q){
 
-						var e = false;
-						b = typeof b == "undefined" ? "x" : b;
-
-						switch (a) {
-						case 'range':
-						case 'start':
-							e = b.length != 2 || !num(b[0]) || !num(b[1]);
-							break;
-						case 'handles':
-							e = (b < 1 || b > 2 || !num(b));
-							break;
-						case 'connect':
-							e = b != "lower" && b != "upper" && typeof b != "boolean";
-							break;
-						case 'orientation':
-							e = (b != "vertical" && b != "horizontal");
-							break;
-						case 'margin':
-						case 'step':
-							e = typeof b != "undefined" && !num(b);
-							break;
-						case 'serialization':
-							e = typeof b != "object" || !num(b.resolution) || (typeof b.to == 'object' && b.to.length < settings.handles);
-							break;
-						case 'slide':
-							e = typeof b != "function";
-							break;
+						if(!q.resolution){
+							o.serialization.resolution = 0.01;
+						} else {
+							switch(q.resolution){
+								case 1:
+								case 0.1:
+								case 0.01:
+								case 0.001:
+								case 0.0001:
+								case 0.00001:
+									break;
+								default:
+									return false;
+							}
 						}
 
-						if (e && console) {
-							console.error('Bad input for ' + a + ' on slider:', slider);
-						}
+						if(q.to){
+						
+							if(o.handles === 1){
+								if(!$.isArray(q.to)){
+									q.to = [q.to];
+								}
+								o.serialization.to = q.to;
+								return ser(q.to[0]);
+							}
+							return (q.to.length === 2 && ser(q.to[0]) && ser(q.to[1]));
 
+						}
+						
+						return false;
+						
+					}
+				}
+				,"slide": {
+					 t: function(o,q){
+					return typeof q === "function";
+					}
+				}
+				,"step": {
+					 t: function(o,q,w){
+						return this.parent.margin.t(o,q,w);
+					}
+				}
+				,"init": function(){
+					var obj = this;
+					$.each(obj,function(i,c){
+						c.parent = obj;
 					});
+					delete this.init;
+					return this;
+				}
+			},
+		
+			// Prepare a set of tests, by adding some internal reference 
+			// values not available in native Javascript object implementation.
+			a = TESTS.init();
+		
+			// Loop all provided tests;
+			// v is the option set, i is the index for the current test.
+			$.each(a, function( i, v ){
+
+				// If the value is required but not set,
+				// or if the test fails, throw an error.
+				if((v.r && (!o[i] && o[i] !== 0)) || ((o[i] || o[i] === 0) && !v.t(o,o[i],i))){
+					
+					// For debugging purposes it might be very useful
+					// to know what option caused the trouble.
+					if(console&&console.log){
+						console.log(
+							"Slider:\t\t\t",	set,
+							"\nOption:\t\t\t",	i,
+							"\nValue:\t\t\t",	o[i]
+						);
+					}
+					$.error("Error on noUiSlider initialisation.");
+					return false;
+				}
 
-					settings.margin = settings.margin ? percentage.from(settings.range, settings.margin) : 0;
+			});
 
-					// tests serialization to be strings or jQuery objects
-					if (settings.serialization.to instanceof jQuery || typeof settings.serialization.to == 'string' || settings.serialization.to === false) {
-						settings.serialization.to = [settings.serialization.to];
+		}
+		
+		function closest( value, to ){
+			return Math.round(value / to) * to;
+		}
+		
+		function setHandle ( handle, to, forgive ) {
+
+			var  nui = handle.data('nui').options
+				// Get the array of handles from the base.
+				// Will be undefined at initialisation.
+				,handles = handle.data('nui').base.data(clsList[12])
+				// Get some settings from the handle
+				,style = handle.data('nui').style
+				,dec = handle.data('nui').decimals
+				,hLimit;
+			
+			// Ignore the call if the handle won't move anyway.
+			if(to === handle[0].getPercentage(style)) {
+				return false;
+			}
+		
+			// Limit `to` to 0 - 100
+			to = to < 0 ? 0 : to > 100 ? 100 : to;
+			
+			// Handle the step option, or ignore it.
+			if( nui.step && !forgive ){
+				to = closest( to, percentage.from(nui.range, nui.step));
+			}
+			
+			// Stop handling this call if the handle won't step to a new value.
+			if(to === handle[0].getPercentage(style)) {
+				return false;
+			}
+		
+			// We're done if this is the only handle,
+			// if the handle bounce is trusted to the user
+			// or on initialisation when handles isn't defined yet.
+			if( handle.siblings('.' + clsList[1]).length && !forgive && handles ){
+			
+				// Otherwise, the handle should bounce, 
+				// and stop at the other handle.
+				if ( handle.data('nui').number ) {
+					hLimit = handles[0][0].getPercentage(style) + nui.margin;
+					to = to < hLimit ? hLimit : to;
+				} else {
+					hLimit = handles[1][0].getPercentage(style) - nui.margin;
+					to = to > hLimit ? hLimit : to;
+				}
+				
+				// Stop handling this call if the handle can't move past another.
+				if(to === handle[0].getPercentage(style)) {
+					return false;
+				}
+			
+			}
+			
+			// Fix for the z-index issue where the lower handle gets stuck
+			// below the upper one. Since this function is called for every
+			// movement, toggleClass cannot be used.
+			if(handle.data('nui').number === 0 && to > 95){
+				handle.addClass(clsList[14]);
+			} else {
+				handle.removeClass(clsList[14]);
+			}
+			
+			// Set handle to new location
+			handle.css( style , to + '%');
+			
+			// Write the value to the serialization object.
+			handle.data('store').val(percentage.is(nui.range, to).toFixed(dec));
+
+			return true;
+			
+		}
+		
+		function store ( handle, S ) {
+		
+			var i = handle.data('nui').number;
+		
+			if( S.to[i] instanceof $ ) {
+			
+				// Attach a change event to the supplied jQuery object,
+				// which will just trigger the val function on the parent.
+				// In some cases, the change event will not fire on select elements,
+				// so listen to 'blur' too.
+				return S.to[i].on('change'+namespace+' blur'+namespace, function(){
+					var arr = [null, null];
+					arr[i] = $(this).val();
+					handle.data('nui').target.val(arr, true);
+				});
+			
+			}
+			
+			if ( typeof S.to[i] === "string" ) {
+			
+				// Append a new object to the noUiSlider base,
+				// prevent change events flowing upward.
+				return $('<input type="hidden" class="'+clsList[3]+'" name="' + S.to[i] + '">')
+					.appendTo(handle).change(__sp);
+			
+			}
+			
+			if ( S.to[i] === false ) {
+
+				// Create an object capable of handling all jQuery calls.
+				return {
+					// The value will be stored a data on the handle.
+					 val : function(a) {
+						// Value function provides a getter and a setter.
+						// Can't just test for !a, as a might be 0.
+						if ( a === UNDEF ) {
+							// Either set...
+							return this._handle.data('nui-val');
+						}
+						// ... or return;
+						this._handle.data('nui-val', a);
 					}
-
-					if (settings.orientation == "vertical") {
-						classes += "vertical";
-						pos = 'top';
-						orientation = 1;
-					} else {
-						classes += "horizontal";
-						pos = 'left';
-						orientation = 0;
+					// The object could be mistaken for a jQuery object,
+					// make sure that doesn't trigger any errors.
+					,hasClass: function(){
+						return false;
 					}
+					// The val function needs access to the handle.
+					,_handle: handle
+				};
+			}
+			
+		}
 
-					classes += settings.connect ? settings.connect == "lower" ? " connect lower" : " connect" : "";
+		function move( event ) {
 
-					slider.addClass(classes);
+			// This function is called often, keep it light.
+		
+			event = fixEvent( event, true );
 
-					for (var i = 0; i < settings.handles; i++) {
+			if(!event) {
+				return;
+			}
 
-						handles[i] = slider.append(handlehtml).children(':last');
-						var setTo = percentage.to(settings.range, settings.start[i]);
-						handles[i].css(pos, setTo + '%');
-						if (setTo == 100 && handles[i].is(':first-child')) {
-							handles[i].css('z-index', 2);
-						}
+			var  base = event.pass.base
+				,style = base.data('style')
+			// Subtract the initial movement from the current event,
+			// while taking vertical sliders into account.
+				,proposal = event.x - event.pass.startEvent.x
+				,baseSize = style === 'left' ? base.width() : base.height();
+				
+			if(style === 'top') {
+				proposal = event.y - event.pass.startEvent.y;
+			}
+			
+			proposal = event.pass.position + ( ( proposal * 100 ) / baseSize );
+
+			setHandle( event.pass.handle, proposal );
 
-						var bind = '.noUiSlider',
-						onEvent = (EVENT === 1 ? 'mousedown' : EVENT === 2 ? 'MSPointerDown' : 'touchstart') + bind + 'X',
-						moveEvent = (EVENT === 1 ? 'mousemove' : EVENT === 2 ? 'MSPointerMove' : 'touchmove') + bind,
-						offEvent = (EVENT === 1 ? 'mouseup' : EVENT === 2 ? 'MSPointerUp' : 'touchend') + bind
+			// Trigger the 'slide' event, pass the target so that it is 'this'.
+			call( 
+				 [ event.pass.base.data('options').slide ]
+				,event.pass.base.data('target')
+			);
+		
+		}
 
-						handles[i].find('div').on(onEvent, function (e) {
+		function end ( event ) {
 
-							$('body').bind('selectstart' + bind, function () {
-								return false;
-							});
+			if ( blocked( event ) ) {
+				return;
+			}
+			
+			// Handle is no longer active;
+			event.data.handle.children().removeClass(clsList[4]);
+		
+			// Unbind move and end events, to prevent
+			// them stacking up over and over;
+			all.off(actions.move);
+			all.off(actions.end);
+			$('body').off(namespace);
+			
+			event.data.base.data('target').change();
+			
+		}
 
-							if (!slider.hasClass('disabled')) {
+		function start ( event ) {
 
-								$('body').addClass('TOUCH');
+			// When the slider is in a transitional state, stop.
+			// Also prevents interaction with disabled sliders.
+			if ( blocked( event ) ) {
+				return;
+			}
+			
+			event = fixEvent( event );
 
-								var handle = $(this).addClass('active').parent(),
-								unbind = handle.add($(document)).add('body'),
-								originalPosition = parseFloat(handle[0].style[pos]),
-								originalClick = client(e),
-								previousClick = originalClick,
-								previousProposal = false;
+			if(!event) {
+				return;
+			}
 
-								$(document).on(moveEvent, function (f) {
+			var  handle = event.pass.handle
+				,position = handle[0].getPercentage( handle.data('nui').style );
+
+			handle.children().addClass('noUi-active');
+			
+			// Attach the move event handler, while
+			// passing all relevant information along.
+			all.on(actions.move, {
+				 startEvent: event
+				,position: position
+				,base: event.pass.base
+				,handle: handle
+			}, move);
+			
+			all.on(actions.end, { base: event.pass.base, handle: handle }, end);
+
+			$('body').on('selectstart' + namespace, function(){ return false; });
+			
+		}
+		
+		function selfEnd( event ) {
+			// Trigger the end handler. Supply correct data using a 
+			// fake object that contains all required information;
+			end({ data: { base: event.data.base, handle: event.data.handle } });
+			// Stop propagation so that the tap handler doesn't interfere;
+			event.stopPropagation();
+		}
+		
+		function tap ( event ) {
 
-									f.preventDefault();
+			if ( blocked( event ) || event.data.base.find('.' + clsList[4]).length ) {
+				return;
+			}
+			
+			event = fixEvent( event );
 
-									var currentClick = client(f);
+			// The event handler might have rejected this event.
+			if(!event) {
+				return;
+			}
+			
+			// Getting variables from the event is not required, but
+			// shortens other expressions and is far more convenient;
+			var  i, handle, base = event.pass.base
+				,handles = event.pass.handles
+				,style = base.data('style')
+				,eventXY = event[style === 'left' ? 'x' : 'y']
+				,baseSize = style === 'left' ? base.width() : base.height()
+				
+			// Create a standard set off offsets compensated with the
+			// scroll distance. When required, correct for scrolling.
+			// This is a bug, as far as I can see, in IE(10?).
+				,correction = {
+					 x: ( event.t[2] ? window.pageXOffset : 0 )
+				}
+				,offset = {
+					 handles: []
+					,base: {
+						 left: base.offset().left - correction.x
+						,top: base.offset().top
+					}
+				};
+				
+			// Loop handles and add data to the offset list.
+			for (i = 0; i < handles.length; i++ ) {
+				offset.handles.push({
+					 left: handles[i].offset().left - correction.x
+					,top: handles[i].offset().top
+				});
+			}
+			
+			// Calculate the central point between the handles;
+			var handleCenter = handles.length === 1 ? 0 :
+				(( offset.handles[0][style] + offset.handles[1][style] ) / 2 );
+			
+			// If there is just one handle,
+			// or the lower handles in closest to the event,
+			// select the first handle. Otherwise, pick the second.
+			if ( handles.length === 1 || eventXY < handleCenter ){
+				handle = handles[0];
+			} else {
+				handle = handles[1];
+			}
 
-									if (currentClick[0] == "x") {
-										return;
-									}
+			// Flag the slider as it is now in a transitional state.
+			// Transition takes 300 ms, so re-enable the slider afterwards.
+			base.addClass(clsList[5]);
+			setTimeout(function(){
+				base.removeClass(clsList[5]);
+			}, 300);
+			
+			// Calculate the new position for the handle and
+			// trigger the movement.
+			setHandle(
+				 handle
+				,(((eventXY - offset.base[style]) * 100) / baseSize)
+			);
+ 
+			// Trigger the 'slide' event, pass the target so that it is 'this'.
+			call( 
+				 [ handle.data('nui').options.slide ]
+				,base.data('target')
+			);
+		
+			base.data('target').change();
 
-									currentClick[0] -= originalClick[0];
-									currentClick[1] -= originalClick[1];
+		}
+		
+		function create ( ) {
+
+			return this.each(function( index, target ){
+
+				// Target is the wrapper that will receive all external
+				// scripting interaction. It has no styling and serves no 
+				// other function.
+				target = $(target);
+				target.addClass(clsList[6]);
+				
+				// Base is the internal main 'bar'. 
+				var  i, style, decimals, handle
+					,base = $('<div/>').appendTo(target)
+					,handles = []
+					,cls = {
+					 base: stdCls.base
+						,origin: [
+							 stdCls.origin.concat([clsList[1] + clsList[7]])
+							,stdCls.origin.concat([clsList[1] + clsList[8]])
+						]
+						,handle: [
+							 stdCls.handle.concat([clsList[2] + clsList[7]])
+							,stdCls.handle.concat([clsList[2] + clsList[8]])
+						]
+					};
+
+				// Set defaults where applicable;
+				options = $.extend({
+					 handles: 2
+					,margin: 0
+					,orientation: "horizontal"
+				}, options) || {};
+				
+				// Set a default for serialization;
+				if(!options.serialization){
+					options.serialization = {
+						 to : [false, false]
+						,resolution : 0.01
+					};
+				}
+				
+				// Run all options through a testing mechanism to ensure correct
+				// input. The test function will throw errors, so there is
+				// no need to capture the result of this call. It should be noted
+				// that options might get modified to be handled properly. E.g.
+				// wrapping integers in arrays.
+				test(options, target);
+				
+				// I can't type serialization any more, and it doesn't compress
+				// very well, so shorten it.
+				options.S = options.serialization;
+
+
+				// INCOMPLETE
+				if( options.connect ) {
+					cls.origin[0].push(clsList[9]);
+					if( options.connect === "lower" ){
+						// Add some styling classes to the base;
+						cls.base.push(clsList[9], clsList[9] + clsList[7]);
+						// When using the option 'Lower', there is only one 
+						// handle, and thus only one origin.
+						cls.origin[0].push(clsList[13]);
+					} else {
+						cls.base.push(clsList[9] + clsList[8]);
+					}
+				}
 
-									var movement = [
-										previousClick[0] != currentClick[0], previousClick[1] != currentClick[1]
-									],
-									proposal = originalPosition + ((currentClick[orientation] * 100) / (orientation ? slider.height() : slider.width()));
-									proposal = correct(proposal, slider, handle);
+				// Parse the syntactic sugar that is the serialization
+				// resolution option to a usable integer.
+				style = options.orientation === 'vertical' ? 'top' : 'left';
+				
+				decimals = options.S.resolution.toString().split('.');
+				// Test ==, not ===
+				decimals = decimals[0] == 1 ? 0 : decimals[1].length;	
+				
+				// Add classes for horizontal and vertical sliders.
+				// The horizontal class is provided for completeness, 
+				// as it isn't used in the default theme.
+				if( options.orientation === "vertical" ){
+					cls.base.push(clsList[10]);
+				} else {
+					cls.base.push(clsList[11]);
+				}
+				
+				// Merge base classes with default;
+				base.addClass(cls.base.join(" ")).data('target', target);
+
+				for (i = 0; i < options.handles; i++ ) {
+
+					handle = $('<div><div/></i>').appendTo(base);
+
+					// Add all default and option-specific classes to the
+					// origins and handles.
+					handle.addClass(cls.origin[i].join(" "));
+					handle.children().addClass(cls.handle[i].join(" "));
+
+					// These events are only bound to the visual handle element,
+					// not the `real` origin element.
+					handle.children()
+						.on(actions.start, { base: base, handle: handle }, start)
+						.on(actions.end, { base: base, handle: handle }, selfEnd);
+
+					// Make sure every handle has access to all primary 
+					// variables. Can't uses jQuery's .data( obj ) structure
+					// here, as `store` needs some values from the `nui` object.
+					handle.data('nui', {
+						 target: target
+						,decimals: decimals
+						,options: options
+						,base: base
+						,style: style
+						,number: i
+					}).data('store', store (
+						 handle
+						,options.S
+					));
+					
+					// Attach a function to the native DOM element,
+					// since jQuery wont let me get the current value in percentages.
+					handle[0].getPercentage = getPercentage;
+					
+					// Make handles loop-able
+					handles.push(handle);
+
+					// Set the handle to its initial position;
+					setHandle(handle, percentage.to(options.range, options.start[i]));
 
-									if (movement[orientation] && proposal != previousProposal) {
-										handle.css(pos, proposal + '%').data('input').val(percentage.is(settings.range, proposal).toFixed(res));
-										call(settings.slide, slider.data('_n', true));
-										previousProposal = proposal;
-										handle.css('z-index', handles.length == 2 && proposal == 100 && handle.is(':first-child') ? 2 : 1);
-									}
+				}
+				
+				// The base could use the handles too;
+				base.data({
+					 options: options
+					,handles: handles
+					,style: style
+				});
+				
+				target.data({
+					 base: base
+					,handles: handles
+				});
+				
+				// The tap event. 
+				base.on(actions.end, { base: base, handles: handles }, tap);
 
-									previousClick = currentClick;
+			});
 
-								}).on(offEvent, function () {
+		}
 
-									unbind.off(bind);
-									$('body').removeClass('TOUCH');
-									if (slider.find('.active').removeClass('active').end().data('_n')) {
-										slider.data('_n', false).change();
-									}
+		function val ( args, ignore ) {
 
-								});
+			// Setter
+			if( args !== UNDEF ){
 
-							}
-						}).on('click', function (e) {
-							e.stopPropagation();
-						});
+				// If the val is to be set to a number, which is valid
+				// when using a one-handle slider, wrap it in an array.
+				if(!$.isArray(args)){
+					args = [args];
+				}
+			
+				// Setting is handled properly for each slider in the data set.
+				return this.each(function(){
 
-					}
+					$.each($(this).data(clsList[12]), function(i, handle){
 
-					if (EVENT == 1) {
-						slider.on('click', function (f) {
-							if (!slider.hasClass('disabled')) {
-								var currentClick = client(f),
-								proposal = ((currentClick[orientation] - slider.offset()[pos]) * 100) / (orientation ? slider.height() : slider.width()),
-								handle = handles.length > 1 ? (currentClick[orientation] < (handles[0].offset()[pos] + handles[1].offset()[pos]) / 2 ? handles[0] : handles[1]) : handles[0];
-								setHandle(handle, correct(proposal, slider, handle), slider);
-								call(settings.slide, slider);
-								slider.change();
+						// The set request might want to ignore this handle.
+						if( args[i] === null ) {
+							return;
+						}
+						
+						// Calculate a new position for the handle.
+						var  value, current
+							,range = handle.data('nui').options.range
+							,to = percentage.to(
+									 range
+									,parseFloat(args[i])
+								 ),
+						
+						// Set handle to new location, and make sure developer 
+						// input is always accepted. The ignore flag indicates
+						// input from user facing elements.
+						result = setHandle(handle, to, (ignore === true ? false : true));
+						
+						// If the value of the input doesn't match the slider,
+						// reset it.
+						if(!result){
+						
+							value = handle.data('store').val();
+							current = percentage.is(range,
+										handle[0].getPercentage(handle.data('nui').style)
+									).toFixed(handle.data('nui').decimals);
+							
+							if(value !== current){
+								handle.data('store').val(current);
 							}
-						});
-					}
-
-					for (var i = 0; i < handles.length; i++) {
-						var val = percentage.is(settings.range, place(handles[i], pos)).toFixed(res);
-						if (typeof settings.serialization.to[i] == 'string') {
-							handles[i].data('input',
-								slider.append('<input type="hidden" name="' + settings.serialization.to[i] + '">').find('input:last')
-								.val(val)
-								.change(function (a) {
-									a.stopPropagation();
-								}));
-						} else if (settings.serialization.to[i] == false) {
-							handles[i].data('input', {
-								val : function (a) {
-									if (typeof a != 'undefined') {
-										this.handle.data('noUiVal', a);
-									} else {
-										return this.handle.data('noUiVal');
-									}
-								},
-								handle : handles[i]
-							});
-						} else {
-							handles[i].data('input', settings.serialization.to[i].data('handleNR', i).val(val).change(function () {
-									var arr = [null, null];
-									arr[$(this).data('handleNR')] = $(this).val();
-									slider.val(arr);
-								}));
 						}
-					}
-
-					$(this).data('setup', {
-						settings : settings,
-						handles : handles,
-						pos : pos,
-						res : res
+						
 					});
 
 				});
-			},
-			val : function () {
-
-				if (typeof arguments[0] !== 'undefined') {
-
-					var val = typeof arguments[0] == 'number' ? [arguments[0]] : arguments[0];
-
-					return this.each(function () {
 
-						var setup = $(this).data('setup');
+			}
 
-						for (var i = 0; i < setup.handles.length; i++) {
-							if (val[i] != null) {
-								var proposal = correct(percentage.to(setup.settings.range, val[i]), $(this), setup.handles[i]);
-								setup.handles[i].css(setup.pos, proposal + '%').data('input').val(percentage.is(setup.settings.range, proposal).toFixed(setup.res));
-							}
-						}
-					});
+			// Or, if the function was called without arguments,
+			// act as a 'getter';
+			
+			var re = [];
 
-				} else {
+			// Loop the handles, and get the value from the input
+			// for every handle on its' own.
+			$.each($(this).data(clsList[12]), function(i, handle){
+				re.push( handle.data('store').val() );
+			});
 
-					var handles = $(this).data('setup').handles,
-					re = [];
-					for (var i = 0; i < handles.length; i++) {
-						re.push(parseFloat(handles[i].data('input').val()));
-					}
-					return re.length == 1 ? re[0] : re;
+			// If the slider has just one handle, return a single value.
+			// Otherwise, return an array.
+			return ( re.length === 1 ? re[0] : re) ;
 
-				}
-			},
-			disabled : function () {
-				return flag ? $(this).addClass('disabled') : $(this).removeClass('disabled');
-			}
 		}
 
-		// remap the native/current val function to noUiSlider
-		var $_val = jQuery.fn.val;
-
-		jQuery.fn.val = function () {
-			return this.data('_isnS_') ? methods.val.apply(this, arguments) : $_val.apply(this, arguments);
-		}
+		// Overwrite the native jQuery val() function
+		// with a simple handler. noUiSlider will use the internal
+		// value method, anything else will use the standard method.
+		$.fn.val = function(){
+			return this.hasClass(clsList[6])
+				? val.apply(this, arguments)
+				: $VAL.apply(this, arguments);
+		};
 
-		return options == "disabled" ? methods.disabled.apply(this) : methods.create.apply(this);
+		return create.apply(this, arguments);
 
-	}
+	};
 
-})(jQuery);
+}(jQuery));