From a89cc635bf4bccf22b3ec322f1e6e6b67172500b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= Date: Thu, 13 Aug 2015 02:14:09 +0200 Subject: [PATCH 1/8] =?UTF-8?q?feature:=20add=20orientation=20support=20?= =?UTF-8?q?=F0=9F=99=8C=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Finally it’s possible to use a vertical and horizontal range slider πŸŽ‰πŸŽ†πŸŽŠπŸŽˆβœ¨ Fixes #11 > Credits @iamdriz, @beard86 --- dist/rangeslider.css | 35 ++++++++++-- dist/rangeslider.js | 123 ++++++++++++++++++++++++++-------------- dist/rangeslider.min.js | 2 +- example/index.html | 33 ++++++++++- src/rangeslider.js | 123 ++++++++++++++++++++++++++-------------- src/rangeslider.scss | 52 +++++++++++++---- 6 files changed, 263 insertions(+), 105 deletions(-) diff --git a/dist/rangeslider.css b/dist/rangeslider.css index f71dae5..b1d4a58 100644 --- a/dist/rangeslider.css +++ b/dist/rangeslider.css @@ -1,9 +1,6 @@ .rangeslider, .rangeslider__fill { - background: #e6e6e6; display: block; - height: 20px; - width: 100%; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); @@ -13,9 +10,21 @@ } .rangeslider { + background: #e6e6e6; position: relative; } +.rangeslider--horizontal { + height: 20px; + width: 100%; +} + +.rangeslider--vertical { + width: 20px; + min-height: 150px; + max-height: 100%; +} + .rangeslider--disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; @@ -24,7 +33,14 @@ .rangeslider__fill { background: #00ff00; position: absolute; +} +.rangeslider--horizontal .rangeslider__fill { top: 0; + height: 100%; +} +.rangeslider--vertical .rangeslider__fill { + bottom: 0; + width: 100%; } .rangeslider__handle { @@ -35,9 +51,6 @@ width: 40px; height: 40px; position: absolute; - top: -10px; - touch-action: pan-y; - -ms-touch-action: pan-y; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1))); @@ -80,6 +93,16 @@ background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); } +.rangeslider--horizontal .rangeslider__handle { + top: -10px; + touch-action: pan-y; + -ms-touch-action: pan-y; +} +.rangeslider--vertical .rangeslider__handle { + left: -10px; + touch-action: pan-x; + -ms-touch-action: pan-x; +} input[type="range"]:focus + .rangeslider .rangeslider__handle { -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); diff --git a/dist/rangeslider.js b/dist/rangeslider.js index 3f9ac6b..4d7180e 100644 --- a/dist/rangeslider.js +++ b/dist/rangeslider.js @@ -37,13 +37,32 @@ inputrange = supportsRange(), defaults = { polyfill: true, + orientation: 'horizontal', rangeClass: 'rangeslider', disabledClass: 'rangeslider--disabled', + horizontalClass: 'rangeslider--horizontal', + verticalClass: 'rangeslider--vertical', fillClass: 'rangeslider__fill', handleClass: 'rangeslider__handle', startEvent: ['mousedown', 'touchstart', 'pointerdown'], moveEvent: ['mousemove', 'touchmove', 'pointermove'], endEvent: ['mouseup', 'touchend', 'pointerup'] + }, + constants = { + orientation: { + horizontal: { + dimension: 'width', + direction: 'left', + directionStyle: 'left', + coordinate: 'x' + }, + vertical: { + dimension: 'height', + direction: 'top', + directionStyle: 'bottom', + coordinate: 'y' + } + } }; /** @@ -176,20 +195,35 @@ return Number.isNaN(value) ? defaultValue : value; } + /** + * Capitalize the first letter of string + * + * @param {String} str + * @return {String} + */ + function ucfirst(str) { + return str.charAt(0).toUpperCase() + str.substr(1); + } + /** * Plugin * @param {String} element * @param {Object} options */ function Plugin(element, options) { - this.$window = $(window); - this.$document = $(document); - this.$element = $(element); - this.options = $.extend( {}, defaults, options ); - this.polyfill = this.options.polyfill; - this.onInit = this.options.onInit; - this.onSlide = this.options.onSlide; - this.onSlideEnd = this.options.onSlideEnd; + this.$window = $(window); + this.$document = $(document); + this.$element = $(element); + this.options = $.extend( {}, defaults, options ); + this.polyfill = this.options.polyfill; + this.orientation = this.$element[0].getAttribute('data-orientation') || this.options.orientation; + this.onInit = this.options.onInit; + this.onSlide = this.options.onSlide; + this.onSlideEnd = this.options.onSlideEnd; + this.DIMENSION = constants.orientation[this.orientation].dimension; + this.DIRECTION = constants.orientation[this.orientation].direction; + this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle; + this.COORDINATE = constants.orientation[this.orientation].coordinate; // Plugin should only be used as a polyfill if (this.polyfill) { @@ -204,7 +238,7 @@ this.toFixed = (this.step + '').replace('.', '').length - 1; this.$fill = $('
'); this.$handle = $('
'); - this.$range = $('
').insertAfter(this.$element).prepend(this.$fill, this.$handle); + this.$range = $('
').insertAfter(this.$element).prepend(this.$fill, this.$handle); // visually hide the input this.$element.css({ @@ -265,11 +299,11 @@ this.step = tryParseFloat(this.$element[0].getAttribute('step'), 1); } - this.handleWidth = getDimension(this.$handle[0], 'offsetWidth'); - this.rangeWidth = getDimension(this.$range[0], 'offsetWidth'); - this.maxHandleX = this.rangeWidth - this.handleWidth; - this.grabX = this.handleWidth / 2; - this.position = this.getPositionFromValue(this.value); + this.handleDimension = getDimension(this.$handle[0], 'offset' + ucfirst(this.DIMENSION)); + this.rangeDimension = getDimension(this.$range[0], 'offset' + ucfirst(this.DIMENSION)); + this.maxHandlePos = this.rangeDimension - this.handleDimension; + this.grabPos = this.handleDimension / 2; + this.position = this.getPositionFromValue(this.value); // Consider disabled state if (this.$element[0].disabled) { @@ -291,21 +325,23 @@ return; } - var posX = this.getRelativePosition(e), - rangeX = this.$range[0].getBoundingClientRect().left, - handleX = this.getPositionFromNode(this.$handle[0]) - rangeX; + var pos = this.getRelativePosition(e), + rangePos = this.$range[0].getBoundingClientRect()[this.DIRECTION], + handlePos = this.getPositionFromNode(this.$handle[0]) - rangePos, + setPos = (this.orientation === 'vertical') ? (this.maxHandlePos - (pos - this.grabPos)) : (pos - this.grabPos); - this.setPosition(posX - this.grabX); + this.setPosition(setPos); - if (posX >= handleX && posX < handleX + this.handleWidth) { - this.grabX = posX - handleX; + if (pos >= handlePos && pos < handlePos + this.handleDimension) { + this.grabPos = pos - handlePos; } }; Plugin.prototype.handleMove = function(e) { e.preventDefault(); - var posX = this.getRelativePosition(e); - this.setPosition(posX - this.grabX); + var pos = this.getRelativePosition(e); + var setPos = (this.orientation === 'vertical') ? (this.maxHandlePos - (pos - this.grabPos)) : (pos - this.grabPos); + this.setPosition(setPos); }; Plugin.prototype.handleEnd = function(e) { @@ -328,23 +364,23 @@ }; Plugin.prototype.setPosition = function(pos) { - var value, left; + var value, newPos; // Snapping steps - value = this.getValueFromPosition(this.cap(pos, 0, this.maxHandleX)); - left = this.getPositionFromValue(value); + value = this.getValueFromPosition(this.cap(pos, 0, this.maxHandlePos)); + newPos = this.getPositionFromValue(value); // Update ui - this.$fill[0].style.width = (left + this.grabX) + 'px'; - this.$handle[0].style.left = left + 'px'; + this.$fill[0].style[this.DIMENSION] = (newPos + this.grabPos) + 'px'; + this.$handle[0].style[this.DIRECTION_STYLE] = newPos + 'px'; this.setValue(value); // Update globals - this.position = left; + this.position = newPos; this.value = value; if (this.onSlide && typeof this.onSlide === 'function') { - this.onSlide(left, value); + this.onSlide(newPos, value); } }; @@ -359,36 +395,37 @@ }; Plugin.prototype.getRelativePosition = function(e) { - // Get the offset left relative to the viewport - var rangeX = this.$range[0].getBoundingClientRect().left, - pageX = 0; + // Get the offset DIRECTION relative to the viewport and scroll position + var ucCoordinate = ucfirst(this.COORDINATE), + rangePos = this.$range[0].getBoundingClientRect()[this.DIRECTION] + window['scroll' + ucCoordinate], + pageCoordinate = 0; - if (typeof e.pageX !== 'undefined') { - pageX = e.pageX; + if (typeof e['page' + ucCoordinate] !== 'undefined') { + pageCoordinate = e['page' + ucCoordinate]; } - else if (typeof e.originalEvent.clientX !== 'undefined') { - pageX = e.originalEvent.clientX; + else if (typeof e.originalEvent['client' + ucCoordinate] !== 'undefined') { + pageCoordinate = e.originalEvent['client' + ucCoordinate]; } - else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0].clientX !== 'undefined') { - pageX = e.originalEvent.touches[0].clientX; + else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0]['client' + ucCoordinate] !== 'undefined') { + pageCoordinate = e.originalEvent.touches[0]['client' + ucCoordinate]; } - else if(e.currentPoint && typeof e.currentPoint.x !== 'undefined') { - pageX = e.currentPoint.x; + else if(e.currentPoint && typeof e.currentPoint[this.COORDINATE] !== 'undefined') { + pageCoordinate = e.currentPoint[this.COORDINATE]; } - return pageX - rangeX; + return pageCoordinate - rangePos; }; Plugin.prototype.getPositionFromValue = function(value) { var percentage, pos; percentage = (value - this.min)/(this.max - this.min); - pos = percentage * this.maxHandleX; + pos = percentage * this.maxHandlePos; return pos; }; Plugin.prototype.getValueFromPosition = function(pos) { var percentage, value; - percentage = ((pos) / (this.maxHandleX || 1)); + percentage = ((pos) / (this.maxHandlePos || 1)); value = this.step * Math.round(percentage * (this.max - this.min) / this.step) + this.min; return Number((value).toFixed(this.toFixed)); }; diff --git a/dist/rangeslider.min.js b/dist/rangeslider.min.js index 7c40123..d8fec51 100644 --- a/dist/rangeslider.min.js +++ b/dist/rangeslider.min.js @@ -1,2 +1,2 @@ /*! rangeslider.js - v1.3.2 | (c) 2015 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */ -!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function c(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function d(a,b){return b=b||100,function(){if(!a.debouncing){var c=Array.prototype.slice.apply(arguments);a.lastReturnVal=a.apply(window,c),a.debouncing=!0}return clearTimeout(a.debounceTimeout),a.debounceTimeout=setTimeout(function(){a.debouncing=!1},b),a.lastReturnVal}}function e(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function f(a){for(var b=[],c=a.parentNode;e(c);)b.push(c),c=c.parentNode;return b}function g(a,b){function c(a){"undefined"!=typeof a.open&&(a.open=a.open?!1:!0)}var d=f(a),e=d.length,g=[],h=a[b];if(e){for(var i=0;e>i;i++)g[i]=d[i].style.cssText,d[i].style.display="block",d[i].style.height="0",d[i].style.overflow="hidden",d[i].style.visibility="hidden",c(d[i]);h=a[b];for(var j=0;e>j;j++)d[j].style.cssText=g[j],c(d[j])}return h}function h(a,b){var c=parseFloat(a);return Number.isNaN(c)?b:c}function i(b,e){if(this.$window=a(window),this.$document=a(document),this.$element=a(b),this.options=a.extend({},m,e),this.polyfill=this.options.polyfill,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.polyfill&&l)return!1;this.identifier="js-"+j+"-"+k++,this.startEvent=this.options.startEvent.join("."+this.identifier+" ")+"."+this.identifier,this.moveEvent=this.options.moveEvent.join("."+this.identifier+" ")+"."+this.identifier,this.endEvent=this.options.endEvent.join("."+this.identifier+" ")+"."+this.identifier,this.toFixed=(this.step+"").replace(".","").length-1,this.$fill=a('
'),this.$handle=a('
'),this.$range=a('
').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=a.proxy(this.handleDown,this),this.handleMove=a.proxy(this.handleMove,this),this.handleEnd=a.proxy(this.handleEnd,this),this.init();var f=this;this.$window.on("resize."+this.identifier,d(function(){c(function(){f.update()},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+this.identifier,function(a,b){if(!b||b.origin!==f.identifier){var c=a.target.value,d=f.getPositionFromValue(c);f.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var j="rangeslider",k=0,l=b(),m={polyfill:!0,rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]};i.prototype.init=function(){this.update(!0),this.$element[0].value=this.value,this.onInit&&"function"==typeof this.onInit&&this.onInit()},i.prototype.update=function(a){a=a||!1,a&&(this.min=h(this.$element[0].getAttribute("min"),0),this.max=h(this.$element[0].getAttribute("max"),100),this.value=h(this.$element[0].value,this.min+(this.max-this.min)/2),this.step=h(this.$element[0].getAttribute("step"),1)),this.handleWidth=g(this.$handle[0],"offsetWidth"),this.rangeWidth=g(this.$range[0],"offsetWidth"),this.maxHandleX=this.rangeWidth-this.handleWidth,this.grabX=this.handleWidth/2,this.position=this.getPositionFromValue(this.value),this.$element[0].disabled?this.$range.addClass(this.options.disabledClass):this.$range.removeClass(this.options.disabledClass),this.setPosition(this.position)},i.prototype.handleDown=function(a){if(a.preventDefault(),this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),!((" "+a.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var b=this.getRelativePosition(a),c=this.$range[0].getBoundingClientRect().left,d=this.getPositionFromNode(this.$handle[0])-c;this.setPosition(b-this.grabX),b>=d&&ba?b:a>c?c:a},i.prototype.setPosition=function(a){var b,c;b=this.getValueFromPosition(this.cap(a,0,this.maxHandleX)),c=this.getPositionFromValue(b),this.$fill[0].style.width=c+this.grabX+"px",this.$handle[0].style.left=c+"px",this.setValue(b),this.position=c,this.value=b,this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(c,b)},i.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},i.prototype.getRelativePosition=function(a){var b=this.$range[0].getBoundingClientRect().left,c=0;return"undefined"!=typeof a.pageX?c=a.pageX:"undefined"!=typeof a.originalEvent.clientX?c=a.originalEvent.clientX:a.originalEvent.touches&&a.originalEvent.touches[0]&&"undefined"!=typeof a.originalEvent.touches[0].clientX?c=a.originalEvent.touches[0].clientX:a.currentPoint&&"undefined"!=typeof a.currentPoint.x&&(c=a.currentPoint.x),c-b},i.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=b*this.maxHandleX},i.prototype.getValueFromPosition=function(a){var b,c;return b=a/(this.maxHandleX||1),c=this.step*Math.round(b*(this.max-this.min)/this.step)+this.min,Number(c.toFixed(this.toFixed))},i.prototype.setValue=function(a){a!==this.value&&this.$element.val(a).trigger("input",{origin:this.identifier})},i.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+j),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[j]=function(b){var c=Array.prototype.slice.call(arguments,1);return this.each(function(){var d=a(this),e=d.data("plugin_"+j);e||d.data("plugin_"+j,e=new i(this,b)),"string"==typeof b&&e[b].apply(e,c)})}}); \ No newline at end of file +!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function c(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function d(a,b){return b=b||100,function(){if(!a.debouncing){var c=Array.prototype.slice.apply(arguments);a.lastReturnVal=a.apply(window,c),a.debouncing=!0}return clearTimeout(a.debounceTimeout),a.debounceTimeout=setTimeout(function(){a.debouncing=!1},b),a.lastReturnVal}}function e(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function f(a){for(var b=[],c=a.parentNode;e(c);)b.push(c),c=c.parentNode;return b}function g(a,b){function c(a){"undefined"!=typeof a.open&&(a.open=a.open?!1:!0)}var d=f(a),e=d.length,g=[],h=a[b];if(e){for(var i=0;e>i;i++)g[i]=d[i].style.cssText,d[i].style.display="block",d[i].style.height="0",d[i].style.overflow="hidden",d[i].style.visibility="hidden",c(d[i]);h=a[b];for(var j=0;e>j;j++)d[j].style.cssText=g[j],c(d[j])}return h}function h(a,b){var c=parseFloat(a);return Number.isNaN(c)?b:c}function i(a){return a.charAt(0).toUpperCase()+a.substr(1)}function j(b,e){if(this.$window=a(window),this.$document=a(document),this.$element=a(b),this.options=a.extend({},n,e),this.polyfill=this.options.polyfill,this.orientation=this.$element[0].getAttribute("data-orientation")||this.options.orientation,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.DIMENSION=o.orientation[this.orientation].dimension,this.DIRECTION=o.orientation[this.orientation].direction,this.DIRECTION_STYLE=o.orientation[this.orientation].directionStyle,this.COORDINATE=o.orientation[this.orientation].coordinate,this.polyfill&&m)return!1;this.identifier="js-"+k+"-"+l++,this.startEvent=this.options.startEvent.join("."+this.identifier+" ")+"."+this.identifier,this.moveEvent=this.options.moveEvent.join("."+this.identifier+" ")+"."+this.identifier,this.endEvent=this.options.endEvent.join("."+this.identifier+" ")+"."+this.identifier,this.toFixed=(this.step+"").replace(".","").length-1,this.$fill=a('
'),this.$handle=a('
'),this.$range=a('
').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=a.proxy(this.handleDown,this),this.handleMove=a.proxy(this.handleMove,this),this.handleEnd=a.proxy(this.handleEnd,this),this.init();var f=this;this.$window.on("resize."+this.identifier,d(function(){c(function(){f.update()},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+this.identifier,function(a,b){if(!b||b.origin!==f.identifier){var c=a.target.value,d=f.getPositionFromValue(c);f.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var k="rangeslider",l=0,m=b(),n={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},o={orientation:{horizontal:{dimension:"width",direction:"left",directionStyle:"left",coordinate:"x"},vertical:{dimension:"height",direction:"top",directionStyle:"bottom",coordinate:"y"}}};j.prototype.init=function(){this.update(!0),this.$element[0].value=this.value,this.onInit&&"function"==typeof this.onInit&&this.onInit()},j.prototype.update=function(a){a=a||!1,a&&(this.min=h(this.$element[0].getAttribute("min"),0),this.max=h(this.$element[0].getAttribute("max"),100),this.value=h(this.$element[0].value,this.min+(this.max-this.min)/2),this.step=h(this.$element[0].getAttribute("step"),1)),this.handleDimension=g(this.$handle[0],"offset"+i(this.DIMENSION)),this.rangeDimension=g(this.$range[0],"offset"+i(this.DIMENSION)),this.maxHandlePos=this.rangeDimension-this.handleDimension,this.grabPos=this.handleDimension/2,this.position=this.getPositionFromValue(this.value),this.$element[0].disabled?this.$range.addClass(this.options.disabledClass):this.$range.removeClass(this.options.disabledClass),this.setPosition(this.position)},j.prototype.handleDown=function(a){if(a.preventDefault(),this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),!((" "+a.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var b=this.getRelativePosition(a),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=this.getPositionFromNode(this.$handle[0])-c,e="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(e),b>=d&&ba?b:a>c?c:a},j.prototype.setPosition=function(a){var b,c;b=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),c=this.getPositionFromValue(b),this.$fill[0].style[this.DIMENSION]=c+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=c+"px",this.setValue(b),this.position=c,this.value=b,this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(c,b)},j.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},j.prototype.getRelativePosition=function(a){var b=i(this.COORDINATE),c=this.$range[0].getBoundingClientRect()[this.DIRECTION]+window["scroll"+b],d=0;return"undefined"!=typeof a["page"+b]?d=a["page"+b]:"undefined"!=typeof a.originalEvent["client"+b]?d=a.originalEvent["client"+b]:a.originalEvent.touches&&a.originalEvent.touches[0]&&"undefined"!=typeof a.originalEvent.touches[0]["client"+b]?d=a.originalEvent.touches[0]["client"+b]:a.currentPoint&&"undefined"!=typeof a.currentPoint[this.COORDINATE]&&(d=a.currentPoint[this.COORDINATE]),d-c},j.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=b*this.maxHandlePos},j.prototype.getValueFromPosition=function(a){var b,c;return b=a/(this.maxHandlePos||1),c=this.step*Math.round(b*(this.max-this.min)/this.step)+this.min,Number(c.toFixed(this.toFixed))},j.prototype.setValue=function(a){a!==this.value&&this.$element.val(a).trigger("input",{origin:this.identifier})},j.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+k),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[k]=function(b){var c=Array.prototype.slice.call(arguments,1);return this.each(function(){var d=a(this),e=d.data("plugin_"+k);e||d.data("plugin_"+k,e=new j(this,b)),"string"==typeof b&&e[b].apply(e,c)})}}); \ No newline at end of file diff --git a/example/index.html b/example/index.html index 1ba7bb6..07fcd06 100644 --- a/example/index.html +++ b/example/index.html @@ -34,6 +34,23 @@ margin: 30px 0; width: 100%; } + + .u-left { + float: left; + } + + .u-cf:before, + .u-cf:after { + content: ""; + display: table; + } + .u-cf:after { + clear: both; + } + + .u-text-left { + text-align: left; + }