From 28e1dc0f58d7ac5e51999d6362cde7f20bbce91d Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Mon, 19 Dec 2016 14:52:54 +0530 Subject: [PATCH 01/15] Added code for RTL feature --- src/rangeslider.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index 4f14624..c5edbb6 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -36,6 +36,7 @@ defaults = { polyfill: true, orientation: 'horizontal', + isRTL:false,//RTL rangeClass: 'rangeslider', disabledClass: 'rangeslider--disabled', activeClass: 'rangeslider--active', @@ -224,8 +225,8 @@ 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.DIRECTION = this.options.isRTL ? 'right' : 'left'; + this.DIRECTION_STYLE = this.options.isRTL ? 'right' : 'left'; this.COORDINATE = constants.orientation[this.orientation].coordinate; // Plugin should only be used as a polyfill @@ -241,7 +242,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({ @@ -423,7 +424,7 @@ pageCoordinate = e.currentPoint[this.COORDINATE]; } - return pageCoordinate - rangePos; + return this.options.isRTL?rangePos-pageCoordinate:pageCoordinate-rangePos; }; Plugin.prototype.getPositionFromValue = function(value) { From adf5ef6f9c7ee4d175f277536061e7d82e4f6707 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Mon, 19 Dec 2016 14:57:11 +0530 Subject: [PATCH 02/15] add css class for RTL --- src/rangeslider.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/rangeslider.scss b/src/rangeslider.scss index 365faea..3be5f0c 100644 --- a/src/rangeslider.scss +++ b/src/rangeslider.scss @@ -7,6 +7,7 @@ $rangeslider--disabled: ".rangeslider--disabled"; $rangeslider--active: ".rangeslider--active"; $rangeslider__fill: ".rangeslider__fill"; $rangeslider__handle: ".rangeslider__handle"; +$rangeslider-rtl: ".rangeslider-rtl"; #{$rangeslider}, #{$rangeslider__fill} { @@ -19,7 +20,9 @@ $rangeslider__handle: ".rangeslider__handle"; background: #e6e6e6; position: relative; } - +#{$rangeslider-rtl} { + direction: rtl; +} #{$rangeslider--horizontal} { height: 20px; width: 100%; From 806affb1c728373dec210654c2cd7d8d1b9e588c Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 24 Jan 2017 18:45:47 +0530 Subject: [PATCH 03/15] refactor implementation for data-direction --- src/rangeslider.js | 50 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index c5edbb6..0793146 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -36,12 +36,13 @@ defaults = { polyfill: true, orientation: 'horizontal', - isRTL:false,//RTL rangeClass: 'rangeslider', disabledClass: 'rangeslider--disabled', activeClass: 'rangeslider--active', horizontalClass: 'rangeslider--horizontal', verticalClass: 'rangeslider--vertical', + dirRTLClass:'rangeslider__rtl', + dirTTBClass:'rangeslider__ttb', fillClass: 'rangeslider__fill', handleClass: 'rangeslider__handle', startEvent: ['mousedown', 'touchstart', 'pointerdown'], @@ -52,14 +53,26 @@ orientation: { horizontal: { dimension: 'width', - direction: 'left', - directionStyle: 'left', + direction: { + ltr: 'left', + rtl: 'right' + }, + directionStyle: { + ltr: 'left', + rtl: 'right' + }, coordinate: 'x' }, vertical: { dimension: 'height', - direction: 'top', - directionStyle: 'bottom', + direction: { + btt:'top', + ttb:'bottom' + }, + directionStyle: { + btt:'bottom', + ttb:'top' + }, coordinate: 'y' } } @@ -208,7 +221,20 @@ function ucfirst(str) { return str.charAt(0).toUpperCase() + str.substr(1); } - + /** + * return direction rtl,ltr,btt,ttb + * @param {String} element + * @param {String} orientation + */ + function getDirection(element,orientation){ + var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr') + + if(constants.orientation[orientation].direction[direction]){ + return direction; + }else{ + return orientation==='vertical'?'btt':'ltr'; + } + } /** * Plugin * @param {String} element @@ -221,12 +247,13 @@ this.options = $.extend( {}, defaults, options ); this.polyfill = this.options.polyfill; this.orientation = this.$element[0].getAttribute('data-orientation') || this.options.orientation; + this.dir = getDirection(this.$element,this.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 = this.options.isRTL ? 'right' : 'left'; - this.DIRECTION_STYLE = this.options.isRTL ? 'right' : 'left'; + this.DIRECTION = constants.orientation[this.orientation].direction[this.dir]; + this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle[this.dir]; this.COORDINATE = constants.orientation[this.orientation].coordinate; // Plugin should only be used as a polyfill @@ -240,10 +267,9 @@ 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 = $('
'); + 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({ 'position': 'absolute', @@ -424,7 +450,7 @@ pageCoordinate = e.currentPoint[this.COORDINATE]; } - return this.options.isRTL?rangePos-pageCoordinate:pageCoordinate-rangePos; + return (this.dir==='rtl'||this.dir==='ttb') ? rangePos - pageCoordinate:pageCoordinate - rangePos; }; Plugin.prototype.getPositionFromValue = function(value) { From 1d5c5f52964ae8020605bf162fc14e97c3612cf3 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 24 Jan 2017 18:48:59 +0530 Subject: [PATCH 04/15] added classes for data-direction --- src/rangeslider.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/rangeslider.scss b/src/rangeslider.scss index 3be5f0c..02a0707 100644 --- a/src/rangeslider.scss +++ b/src/rangeslider.scss @@ -7,7 +7,8 @@ $rangeslider--disabled: ".rangeslider--disabled"; $rangeslider--active: ".rangeslider--active"; $rangeslider__fill: ".rangeslider__fill"; $rangeslider__handle: ".rangeslider__handle"; -$rangeslider-rtl: ".rangeslider-rtl"; +$rangeslider__rtl: ".rangeslider__rtl"; +$rangeslider__ttb: ".rangeslider__ttb"; #{$rangeslider}, #{$rangeslider__fill} { @@ -20,9 +21,7 @@ $rangeslider-rtl: ".rangeslider-rtl"; background: #e6e6e6; position: relative; } -#{$rangeslider-rtl} { - direction: rtl; -} + #{$rangeslider--horizontal} { height: 20px; width: 100%; @@ -34,6 +33,15 @@ $rangeslider-rtl: ".rangeslider-rtl"; max-height: 100%; } +#{$rangeslider__rtl} { + direction: rtl; +} + +#{$rangeslider__ttb} { + top: 0; + bottom: inherit; +} + #{$rangeslider--disabled} { @include opacity(.4); } From c521a4450177f01b956f99594c648842a1cf36f7 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 24 Jan 2017 18:52:43 +0530 Subject: [PATCH 05/15] Update rangeslider.js --- dist/rangeslider.js | 49 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/dist/rangeslider.js b/dist/rangeslider.js index 191e003..8031a4a 100644 --- a/dist/rangeslider.js +++ b/dist/rangeslider.js @@ -42,6 +42,8 @@ activeClass: 'rangeslider--active', horizontalClass: 'rangeslider--horizontal', verticalClass: 'rangeslider--vertical', + dirRTLClass:'rangeslider__rtl', + dirTTBClass:'rangeslider__ttb', fillClass: 'rangeslider__fill', handleClass: 'rangeslider__handle', startEvent: ['mousedown', 'touchstart', 'pointerdown'], @@ -52,14 +54,26 @@ orientation: { horizontal: { dimension: 'width', - direction: 'left', - directionStyle: 'left', + direction: { + ltr: 'left', + rtl: 'right' + }, + directionStyle: { + ltr: 'left', + rtl: 'right' + }, coordinate: 'x' }, vertical: { dimension: 'height', - direction: 'top', - directionStyle: 'bottom', + direction: { + btt:'top', + ttb:'bottom' + }, + directionStyle: { + btt:'bottom', + ttb:'top' + }, coordinate: 'y' } } @@ -208,7 +222,20 @@ function ucfirst(str) { return str.charAt(0).toUpperCase() + str.substr(1); } - + /** + * return direction rtl,ltr,btt,ttb + * @param {String} element + * @param {String} orientation + */ + function getDirection(element,orientation){ + var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr') + + if(constants.orientation[orientation].direction[direction]){ + return direction; + }else{ + return orientation==='vertical'?'btt':'ltr'; + } + } /** * Plugin * @param {String} element @@ -221,12 +248,13 @@ this.options = $.extend( {}, defaults, options ); this.polyfill = this.options.polyfill; this.orientation = this.$element[0].getAttribute('data-orientation') || this.options.orientation; + this.dir = getDirection(this.$element,this.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.DIRECTION = constants.orientation[this.orientation].direction[this.dir]; + this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle[this.dir]; this.COORDINATE = constants.orientation[this.orientation].coordinate; // Plugin should only be used as a polyfill @@ -240,10 +268,9 @@ 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 = $('
'); + 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({ 'position': 'absolute', @@ -424,7 +451,7 @@ pageCoordinate = e.currentPoint[this.COORDINATE]; } - return pageCoordinate - rangePos; + return (this.dir==='rtl'||this.dir==='ttb') ? rangePos - pageCoordinate:pageCoordinate - rangePos; }; Plugin.prototype.getPositionFromValue = function(value) { From 76e1d5ca8ad758d1bf33b5672ee5bcbc4225947b Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 24 Jan 2017 18:54:08 +0530 Subject: [PATCH 06/15] Update rangeslider.css --- dist/rangeslider.css | 173 +++++++++++++++++++++++-------------------- 1 file changed, 93 insertions(+), 80 deletions(-) diff --git a/dist/rangeslider.css b/dist/rangeslider.css index 4c8fa34..0597809 100644 --- a/dist/rangeslider.css +++ b/dist/rangeslider.css @@ -1,111 +1,124 @@ .rangeslider, .rangeslider__fill { - display: block; - -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); - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - border-radius: 10px; + display: block; + -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); + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; } - .rangeslider { - background: #e6e6e6; - position: relative; + background: #e6e6e6; + position: relative; } - .rangeslider--horizontal { - height: 20px; - width: 100%; + height: 20px; + width: 100%; } .rangeslider--vertical { - width: 20px; - min-height: 150px; - max-height: 100%; + width: 20px; + min-height: 150px; + max-height: 100%; +} +/*right-to-left*/ +.rangeslider__rtl { + direction: rtl; +} +/*top-to-bottom*/ +.rangeslider__ttb { + top: 0; + bottom: initial; } - .rangeslider--disabled { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - opacity: 0.4; + filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=40); + opacity: 0.4; } .rangeslider__fill { - background: #00ff00; - position: absolute; + background: #00ff00; + position: absolute; } + .rangeslider--horizontal .rangeslider__fill { - top: 0; - height: 100%; + top: 0; + height: 100%; } + .rangeslider--vertical .rangeslider__fill { - bottom: 0; - width: 100%; + bottom: 0; + width: 100%; } .rangeslider__handle { - background: white; - border: 1px solid #ccc; - cursor: pointer; - display: inline-block; - width: 40px; - height: 40px; - position: absolute; - 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))); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; + background: white; + border: 1px solid #ccc; + cursor: pointer; + display: inline-block; + width: 40px; + height: 40px; + position: absolute; + 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))); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; } + .rangeslider__handle:after { - content: ""; - display: block; - width: 18px; - height: 18px; - margin: auto; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0))); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); - background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; -} -.rangeslider__handle:active, .rangeslider--active .rangeslider__handle { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12))); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); - 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)); + content: ""; + display: block; + width: 18px; + height: 18px; + margin: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0))); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} + +.rangeslider__handle:active, +.rangeslider--active .rangeslider__handle { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12))); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); + 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; + 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; + 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); - -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); - box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); + -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); + -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); + box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); } From f2ce666b147de42626a098223a0aa39273e331ef Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 24 Jan 2017 18:58:22 +0530 Subject: [PATCH 07/15] Update rangeslider.min.js --- dist/rangeslider.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/rangeslider.min.js b/dist/rangeslider.min.js index 6dcf980..22115b4 100644 --- a/dist/rangeslider.min.js +++ b/dist/rangeslider.min.js @@ -1,2 +1,2 @@ /*! rangeslider.js - v2.3.0 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */ -!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(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)}var d=f(a),e=d.length,g=[],h=a[b];if(e){for(var i=0;i'),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(!1,!1)},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",activeClass:"rangeslider--active",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"}}};return j.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},j.prototype.update=function(a,b){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,Math.round(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,b)},j.prototype.handleDown=function(a){if(a.preventDefault(),this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),this.$range.addClass(this.options.activeClass),!((" "+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&&bc?c:a},j.prototype.setPosition=function(a,b){var c,d;void 0===b&&(b=!0),c=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),d=this.getPositionFromValue(c),this.$fill[0].style[this.DIMENSION]=d+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=d+"px",this.setValue(c),this.position=d,this.value=c,b&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(d,c)},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],d=0;return"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=Number.isNaN(b)?0: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[0].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)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"}); \ No newline at end of file +!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function h(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function i(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 j(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function k(a){for(var b=[],c=a.parentNode;j(c);)b.push(c),c=c.parentNode;return b}function l(a,b){function g(a){"undefined"!=typeof a.open&&(a.open=!a.open)}var c=k(a),d=c.length,e=[],f=a[b];if(d){for(var h=0;h'),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 k=this;this.$window.on("resize."+this.identifier,i(function(){h(function(){k.update(!1,!1)},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!==k.identifier){var c=a.target.value,d=k.getPositionFromValue(c);k.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var c="rangeslider",d=0,e=b(),f={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",activeClass:"rangeslider--active",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",dirRTLClass:"rangeslider__rtl",dirTTBClass:"rangeslider__ttb",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},g={orientation:{horizontal:{dimension:"width",direction:{ltr:"left",rtl:"right"},directionStyle:{ltr:"left",rtl:"right"},coordinate:"x"},vertical:{dimension:"height",direction:{btt:"top",ttb:"bottom"},directionStyle:{btt:"bottom",ttb:"top"},coordinate:"y"}}};return p.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},p.prototype.update=function(a,b){a=a||!1,a&&(this.min=m(this.$element[0].getAttribute("min"),0),this.max=m(this.$element[0].getAttribute("max"),100),this.value=m(this.$element[0].value,Math.round(this.min+(this.max-this.min)/2)),this.step=m(this.$element[0].getAttribute("step"),1)),this.handleDimension=l(this.$handle[0],"offset"+n(this.DIMENSION)),this.rangeDimension=l(this.$range[0],"offset"+n(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,b)},p.prototype.handleDown=function(a){if(a.preventDefault(),this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),this.$range.addClass(this.options.activeClass),!((" "+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&&bc?c:a},p.prototype.setPosition=function(a,b){var c,d;void 0===b&&(b=!0),c=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),d=this.getPositionFromValue(c),this.$fill[0].style[this.DIMENSION]=d+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=d+"px",this.setValue(c),this.position=d,this.value=c,b&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(d,c)},p.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},p.prototype.getRelativePosition=function(a){var b=n(this.COORDINATE),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=0;return"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]),"rtl"===this.dir||"ttb"===this.dir?c-d:d-c},p.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=Number.isNaN(b)?0:b*this.maxHandlePos},p.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))},p.prototype.setValue=function(a){a===this.value&&""!==this.$element[0].value||this.$element.val(a).trigger("input",{origin:this.identifier})},p.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+c),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[c]=function(b){var d=Array.prototype.slice.call(arguments,1);return this.each(function(){var e=a(this),f=e.data("plugin_"+c);f||e.data("plugin_"+c,f=new p(this,b)),"string"==typeof b&&f[b].apply(f,d)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"}); From f660cac50edde127593c7d9381ff65b4e5b4a995 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 24 Jan 2017 19:05:29 +0530 Subject: [PATCH 08/15] typo mistake --- src/rangeslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index 0793146..850b28b 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -227,7 +227,7 @@ * @param {String} orientation */ function getDirection(element,orientation){ - var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr') + var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr'); if(constants.orientation[orientation].direction[direction]){ return direction; From 7816675043bcad5d72f189b3e9d7efecc7df7fd8 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 21 Feb 2017 18:30:10 +0530 Subject: [PATCH 09/15] no more requred --- src/rangeslider.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/rangeslider.scss b/src/rangeslider.scss index 02a0707..2677fb0 100644 --- a/src/rangeslider.scss +++ b/src/rangeslider.scss @@ -39,7 +39,6 @@ $rangeslider__ttb: ".rangeslider__ttb"; #{$rangeslider__ttb} { top: 0; - bottom: inherit; } #{$rangeslider--disabled} { From a56bdd4731b3e705ab78ef8e3020b8eafe70c8f9 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Tue, 21 Feb 2017 18:30:50 +0530 Subject: [PATCH 10/15] Update rangeslider.css --- dist/rangeslider.css | 1 - 1 file changed, 1 deletion(-) diff --git a/dist/rangeslider.css b/dist/rangeslider.css index 0597809..42923b1 100644 --- a/dist/rangeslider.css +++ b/dist/rangeslider.css @@ -29,7 +29,6 @@ /*top-to-bottom*/ .rangeslider__ttb { top: 0; - bottom: initial; } .rangeslider--disabled { filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=40); From a03b26348585deb148272aa3121ca03de49b60a6 Mon Sep 17 00:00:00 2001 From: NayanK444 Date: Wed, 1 Mar 2017 11:53:45 +0530 Subject: [PATCH 11/15] removed extra space --- dist/rangeslider.css | 174 ++++++++++++++++++++-------------------- dist/rangeslider.js | 28 +++---- dist/rangeslider.min.js | 2 +- src/rangeslider.js | 29 +++---- 4 files changed, 105 insertions(+), 128 deletions(-) diff --git a/dist/rangeslider.css b/dist/rangeslider.css index 42923b1..37cf59b 100644 --- a/dist/rangeslider.css +++ b/dist/rangeslider.css @@ -1,123 +1,119 @@ .rangeslider, .rangeslider__fill { - display: block; - -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); - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - border-radius: 10px; + display: block; + -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); + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; } + .rangeslider { - background: #e6e6e6; - position: relative; + background: #e6e6e6; + position: relative; } + .rangeslider--horizontal { - height: 20px; - width: 100%; + height: 20px; + width: 100%; } .rangeslider--vertical { - width: 20px; - min-height: 150px; - max-height: 100%; + width: 20px; + min-height: 150px; + max-height: 100%; } -/*right-to-left*/ + .rangeslider__rtl { - direction: rtl; + direction: rtl; } -/*top-to-bottom*/ + .rangeslider__ttb { - top: 0; + top: 0; } + .rangeslider--disabled { - filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=40); - opacity: 0.4; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + opacity: 0.4; } .rangeslider__fill { - background: #00ff00; - position: absolute; + background: #00ff00; + position: absolute; } - .rangeslider--horizontal .rangeslider__fill { - top: 0; - height: 100%; + top: 0; + height: 100%; } - .rangeslider--vertical .rangeslider__fill { - bottom: 0; - width: 100%; + bottom: 0; + width: 100%; } .rangeslider__handle { - background: white; - border: 1px solid #ccc; - cursor: pointer; - display: inline-block; - width: 40px; - height: 40px; - position: absolute; - 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))); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; + background: white; + border: 1px solid #ccc; + cursor: pointer; + display: inline-block; + width: 40px; + height: 40px; + position: absolute; + 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))); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; } - .rangeslider__handle:after { - content: ""; - display: block; - width: 18px; - height: 18px; - margin: auto; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0))); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); - background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; -} - -.rangeslider__handle:active, -.rangeslider--active .rangeslider__handle { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12))); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); - 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)); + content: ""; + display: block; + width: 18px; + height: 18px; + margin: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0))); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} +.rangeslider__handle:active, .rangeslider--active .rangeslider__handle { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12))); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); + 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; + 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; + 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); - -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); - box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); -} + -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); + -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); + box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); +} \ No newline at end of file diff --git a/dist/rangeslider.js b/dist/rangeslider.js index 8031a4a..50327d7 100644 --- a/dist/rangeslider.js +++ b/dist/rangeslider.js @@ -1,4 +1,3 @@ -/*! rangeslider.js - v2.3.0 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */ (function(factory) { 'use strict'; @@ -54,26 +53,14 @@ orientation: { horizontal: { dimension: 'width', - direction: { - ltr: 'left', - rtl: 'right' - }, - directionStyle: { - ltr: 'left', - rtl: 'right' - }, + direction: { ltr: 'left', rtl: 'right'}, + directionStyle: { ltr: 'left', rtl: 'right' }, coordinate: 'x' }, vertical: { dimension: 'height', - direction: { - btt:'top', - ttb:'bottom' - }, - directionStyle: { - btt:'bottom', - ttb:'top' - }, + direction: { btt:'top', ttb:'bottom' }, + directionStyle: { btt:'bottom', ttb:'top' }, coordinate: 'y' } } @@ -222,11 +209,12 @@ function ucfirst(str) { return str.charAt(0).toUpperCase() + str.substr(1); } + /** * return direction rtl,ltr,btt,ttb * @param {String} element * @param {String} orientation - */ + */ function getDirection(element,orientation){ var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr') @@ -236,6 +224,7 @@ return orientation==='vertical'?'btt':'ltr'; } } + /** * Plugin * @param {String} element @@ -271,6 +260,7 @@ this.$fill = $('
'); this.$handle = $('
'); this.$range = $('
').insertAfter(this.$element).prepend(this.$fill, this.$handle); + // visually hide the input this.$element.css({ 'position': 'absolute', @@ -451,7 +441,7 @@ pageCoordinate = e.currentPoint[this.COORDINATE]; } - return (this.dir==='rtl'||this.dir==='ttb') ? rangePos - pageCoordinate:pageCoordinate - rangePos; + return (this.dir==='rtl'||this.dir==='ttb') ? rangePos - pageCoordinate:pageCoordinate - rangePos; }; Plugin.prototype.getPositionFromValue = function(value) { diff --git a/dist/rangeslider.min.js b/dist/rangeslider.min.js index 22115b4..9ccdfba 100644 --- a/dist/rangeslider.min.js +++ b/dist/rangeslider.min.js @@ -1,2 +1,2 @@ /*! rangeslider.js - v2.3.0 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */ -!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function h(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function i(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 j(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function k(a){for(var b=[],c=a.parentNode;j(c);)b.push(c),c=c.parentNode;return b}function l(a,b){function g(a){"undefined"!=typeof a.open&&(a.open=!a.open)}var c=k(a),d=c.length,e=[],f=a[b];if(d){for(var h=0;h'),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 k=this;this.$window.on("resize."+this.identifier,i(function(){h(function(){k.update(!1,!1)},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!==k.identifier){var c=a.target.value,d=k.getPositionFromValue(c);k.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var c="rangeslider",d=0,e=b(),f={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",activeClass:"rangeslider--active",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",dirRTLClass:"rangeslider__rtl",dirTTBClass:"rangeslider__ttb",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},g={orientation:{horizontal:{dimension:"width",direction:{ltr:"left",rtl:"right"},directionStyle:{ltr:"left",rtl:"right"},coordinate:"x"},vertical:{dimension:"height",direction:{btt:"top",ttb:"bottom"},directionStyle:{btt:"bottom",ttb:"top"},coordinate:"y"}}};return p.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},p.prototype.update=function(a,b){a=a||!1,a&&(this.min=m(this.$element[0].getAttribute("min"),0),this.max=m(this.$element[0].getAttribute("max"),100),this.value=m(this.$element[0].value,Math.round(this.min+(this.max-this.min)/2)),this.step=m(this.$element[0].getAttribute("step"),1)),this.handleDimension=l(this.$handle[0],"offset"+n(this.DIMENSION)),this.rangeDimension=l(this.$range[0],"offset"+n(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,b)},p.prototype.handleDown=function(a){if(a.preventDefault(),this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),this.$range.addClass(this.options.activeClass),!((" "+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&&bc?c:a},p.prototype.setPosition=function(a,b){var c,d;void 0===b&&(b=!0),c=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),d=this.getPositionFromValue(c),this.$fill[0].style[this.DIMENSION]=d+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=d+"px",this.setValue(c),this.position=d,this.value=c,b&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(d,c)},p.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},p.prototype.getRelativePosition=function(a){var b=n(this.COORDINATE),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=0;return"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]),"rtl"===this.dir||"ttb"===this.dir?c-d:d-c},p.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=Number.isNaN(b)?0:b*this.maxHandlePos},p.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))},p.prototype.setValue=function(a){a===this.value&&""!==this.$element[0].value||this.$element.val(a).trigger("input",{origin:this.identifier})},p.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+c),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[c]=function(b){var d=Array.prototype.slice.call(arguments,1);return this.each(function(){var e=a(this),f=e.data("plugin_"+c);f||e.data("plugin_"+c,f=new p(this,b)),"string"==typeof b&&f[b].apply(f,d)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"}); +!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){"use strict";function i(){var t=document.createElement("input");return t.setAttribute("type","range"),"text"!==t.type}function e(t,i){var e=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return t.apply(null,e)},i)}function n(t,i){return i=i||100,function(){if(!t.debouncing){var e=Array.prototype.slice.apply(arguments);t.lastReturnVal=t.apply(window,e),t.debouncing=!0}return clearTimeout(t.debounceTimeout),t.debounceTimeout=setTimeout(function(){t.debouncing=!1},i),t.lastReturnVal}}function s(t){return t&&(0===t.offsetWidth||0===t.offsetHeight||t.open===!1)}function o(t){for(var i=[],e=t.parentNode;s(e);)i.push(e),e=e.parentNode;return i}function r(t,i){function e(t){"undefined"!=typeof t.open&&(t.open=t.open?!1:!0)}var n=o(t),s=n.length,r=[],a=t[i];if(s){for(var h=0;s>h;h++)r[h]=n[h].style.cssText,n[h].style.setProperty?n[h].style.setProperty("display","block","important"):n[h].style.cssText+=";display: block !important",n[h].style.height="0",n[h].style.overflow="hidden",n[h].style.visibility="hidden",e(n[h]);a=t[i];for(var l=0;s>l;l++)n[l].style.cssText=r[l],e(n[l])}return a}function a(t,i){var e=parseFloat(t);return Number.isNaN(e)?i:e}function h(t){return t.charAt(0).toUpperCase()+t.substr(1)}function l(t,i){var e=t[0].getAttribute("data-direction")||("vertical"===i?"btt":"ltr");return m.orientation[i].direction[e]?e:"vertical"===i?"btt":"ltr"}function d(i,s){if(this.$window=t(window),this.$document=t(document),this.$element=t(i),this.options=t.extend({},c,s),this.polyfill=this.options.polyfill,this.orientation=this.$element[0].getAttribute("data-orientation")||this.options.orientation,this.dir=l(this.$element,this.orientation),this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.DIMENSION=m.orientation[this.orientation].dimension,this.DIRECTION=m.orientation[this.orientation].direction[this.dir],this.DIRECTION_STYLE=m.orientation[this.orientation].directionStyle[this.dir],this.COORDINATE=m.orientation[this.orientation].coordinate,this.polyfill&&f)return!1;this.identifier="js-"+u+"-"+p++,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=t('
'),this.$handle=t('
'),this.$range=t('
').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=t.proxy(this.handleDown,this),this.handleMove=t.proxy(this.handleMove,this),this.handleEnd=t.proxy(this.handleEnd,this),this.init();var o=this;this.$window.on("resize."+this.identifier,n(function(){e(function(){o.update(!1,!1)},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+this.identifier,function(t,i){if(!i||i.origin!==o.identifier){var e=t.target.value,n=o.getPositionFromValue(e);o.setPosition(n)}})}Number.isNaN=Number.isNaN||function(t){return"number"==typeof t&&t!==t};var u="rangeslider",p=0,f=i(),c={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",activeClass:"rangeslider--active",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",dirRTLClass:"rangeslider__rtl",dirTTBClass:"rangeslider__ttb",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},m={orientation:{horizontal:{dimension:"width",direction:{ltr:"left",rtl:"right"},directionStyle:{ltr:"left",rtl:"right"},coordinate:"x"},vertical:{dimension:"height",direction:{btt:"top",ttb:"bottom"},directionStyle:{btt:"bottom",ttb:"top"},coordinate:"y"}}};return d.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},d.prototype.update=function(t,i){t=t||!1,t&&(this.min=a(this.$element[0].getAttribute("min"),0),this.max=a(this.$element[0].getAttribute("max"),100),this.value=a(this.$element[0].value,Math.round(this.min+(this.max-this.min)/2)),this.step=a(this.$element[0].getAttribute("step"),1)),this.handleDimension=r(this.$handle[0],"offset"+h(this.DIMENSION)),this.rangeDimension=r(this.$range[0],"offset"+h(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,i)},d.prototype.handleDown=function(t){if(t.preventDefault(),this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),this.$range.addClass(this.options.activeClass),!((" "+t.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var i=this.getRelativePosition(t),e=this.$range[0].getBoundingClientRect()[this.DIRECTION],n=this.getPositionFromNode(this.$handle[0])-e,s="vertical"===this.orientation?this.maxHandlePos-(i-this.grabPos):i-this.grabPos;this.setPosition(s),i>=n&&it?i:t>e?e:t},d.prototype.setPosition=function(t,i){var e,n;void 0===i&&(i=!0),e=this.getValueFromPosition(this.cap(t,0,this.maxHandlePos)),n=this.getPositionFromValue(e),this.$fill[0].style[this.DIMENSION]=n+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=n+"px",this.setValue(e),this.position=n,this.value=e,i&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(n,e)},d.prototype.getPositionFromNode=function(t){for(var i=0;null!==t;)i+=t.offsetLeft,t=t.offsetParent;return i},d.prototype.getRelativePosition=function(t){var i=h(this.COORDINATE),e=this.$range[0].getBoundingClientRect()[this.DIRECTION],n=0;return"undefined"!=typeof t.originalEvent["client"+i]?n=t.originalEvent["client"+i]:t.originalEvent.touches&&t.originalEvent.touches[0]&&"undefined"!=typeof t.originalEvent.touches[0]["client"+i]?n=t.originalEvent.touches[0]["client"+i]:t.currentPoint&&"undefined"!=typeof t.currentPoint[this.COORDINATE]&&(n=t.currentPoint[this.COORDINATE]),"rtl"===this.dir||"ttb"===this.dir?e-n:n-e},d.prototype.getPositionFromValue=function(t){var i,e;return i=(t-this.min)/(this.max-this.min),e=Number.isNaN(i)?0:i*this.maxHandlePos},d.prototype.getValueFromPosition=function(t){var i,e;return i=t/(this.maxHandlePos||1),e=this.step*Math.round(i*(this.max-this.min)/this.step)+this.min,Number(e.toFixed(this.toFixed))},d.prototype.setValue=function(t){(t!==this.value||""===this.$element[0].value)&&this.$element.val(t).trigger("input",{origin:this.identifier})},d.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+u),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},t.fn[u]=function(i){var e=Array.prototype.slice.call(arguments,1);return this.each(function(){var n=t(this),s=n.data("plugin_"+u);s||n.data("plugin_"+u,s=new d(this,i)),"string"==typeof i&&s[i].apply(s,e)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"}); diff --git a/src/rangeslider.js b/src/rangeslider.js index 850b28b..50327d7 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -53,26 +53,14 @@ orientation: { horizontal: { dimension: 'width', - direction: { - ltr: 'left', - rtl: 'right' - }, - directionStyle: { - ltr: 'left', - rtl: 'right' - }, + direction: { ltr: 'left', rtl: 'right'}, + directionStyle: { ltr: 'left', rtl: 'right' }, coordinate: 'x' }, vertical: { dimension: 'height', - direction: { - btt:'top', - ttb:'bottom' - }, - directionStyle: { - btt:'bottom', - ttb:'top' - }, + direction: { btt:'top', ttb:'bottom' }, + directionStyle: { btt:'bottom', ttb:'top' }, coordinate: 'y' } } @@ -221,13 +209,14 @@ function ucfirst(str) { return str.charAt(0).toUpperCase() + str.substr(1); } + /** * return direction rtl,ltr,btt,ttb * @param {String} element * @param {String} orientation - */ + */ function getDirection(element,orientation){ - var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr'); + var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr') if(constants.orientation[orientation].direction[direction]){ return direction; @@ -235,6 +224,7 @@ return orientation==='vertical'?'btt':'ltr'; } } + /** * Plugin * @param {String} element @@ -270,6 +260,7 @@ this.$fill = $('
'); this.$handle = $('
'); this.$range = $('
').insertAfter(this.$element).prepend(this.$fill, this.$handle); + // visually hide the input this.$element.css({ 'position': 'absolute', @@ -450,7 +441,7 @@ pageCoordinate = e.currentPoint[this.COORDINATE]; } - return (this.dir==='rtl'||this.dir==='ttb') ? rangePos - pageCoordinate:pageCoordinate - rangePos; + return (this.dir==='rtl'||this.dir==='ttb') ? rangePos - pageCoordinate:pageCoordinate - rangePos; }; Plugin.prototype.getPositionFromValue = function(value) { From cb4765da9b6c783a6663b9ae09c5810b7e31f11c Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Wed, 1 Mar 2017 12:37:04 +0530 Subject: [PATCH 12/15] Update rangeslider.js --- src/rangeslider.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index 50327d7..a2b9298 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -216,8 +216,7 @@ * @param {String} orientation */ function getDirection(element,orientation){ - var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr') - + var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr'); if(constants.orientation[orientation].direction[direction]){ return direction; }else{ From 559e5dd31e89f5171f881ad351193b8d191a8283 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Fri, 3 Mar 2017 10:29:34 +0530 Subject: [PATCH 13/15] code beautified --- src/rangeslider.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index a2b9298..7c4404c 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -41,8 +41,8 @@ activeClass: 'rangeslider--active', horizontalClass: 'rangeslider--horizontal', verticalClass: 'rangeslider--vertical', - dirRTLClass:'rangeslider__rtl', - dirTTBClass:'rangeslider__ttb', + dirRTLClass: 'rangeslider__rtl', + dirTTBClass: 'rangeslider__ttb', fillClass: 'rangeslider__fill', handleClass: 'rangeslider__handle', startEvent: ['mousedown', 'touchstart', 'pointerdown'], @@ -216,11 +216,12 @@ * @param {String} orientation */ function getDirection(element,orientation){ - var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr'); - if(constants.orientation[orientation].direction[direction]){ + var direction = element[0].getAttribute('data-direction') || (orientation === 'vertical' ? 'btt' : 'ltr'); + + if (constants.orientation[orientation].direction[direction]) { return direction; - }else{ - return orientation==='vertical'?'btt':'ltr'; + } else { + return orientation === 'vertical' ? 'btt' : 'ltr'; } } @@ -256,9 +257,9 @@ 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 = $('
'); + 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({ @@ -440,7 +441,7 @@ pageCoordinate = e.currentPoint[this.COORDINATE]; } - return (this.dir==='rtl'||this.dir==='ttb') ? rangePos - pageCoordinate:pageCoordinate - rangePos; + return (this.dir === 'rtl' || this.dir === 'ttb') ? rangePos - pageCoordinate : pageCoordinate - rangePos; }; Plugin.prototype.getPositionFromValue = function(value) { From 9d0f90392a41fdb98de374ab47059386604756d9 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Wed, 16 Aug 2017 10:10:05 +0530 Subject: [PATCH 14/15] removed spacing --- dist/rangeslider.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/dist/rangeslider.js b/dist/rangeslider.js index 50327d7..100bc56 100644 --- a/dist/rangeslider.js +++ b/dist/rangeslider.js @@ -215,13 +215,13 @@ * @param {String} element * @param {String} orientation */ - function getDirection(element,orientation){ - var direction=element[0].getAttribute('data-direction')||(orientation==='vertical'?'btt':'ltr') - - if(constants.orientation[orientation].direction[direction]){ + function getDirection(element, orientation){ + var direction = element[0].getAttribute('data-direction') || (orientation === 'vertical' ? 'btt' : 'ltr'); + + if (constants.orientation[orientation].direction[direction]) { return direction; - }else{ - return orientation==='vertical'?'btt':'ltr'; + } else { + return orientation === 'vertical' ? 'btt' : 'ltr'; } } From b5044fda626468d7bf10bc645786beac62275a28 Mon Sep 17 00:00:00 2001 From: Nayan Khedkar Date: Mon, 9 Oct 2017 17:18:06 +0530 Subject: [PATCH 15/15] Update rangeslider.js --- src/rangeslider.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index aaf5771..4f5fc83 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -336,7 +336,9 @@ e.preventDefault(); // Only respond to mouse main button clicks (usually the left button) - if (e.button && e.button !== 0) return; + if (e.button && e.button !== 0) { + return; + } this.$document.on(this.moveEvent, this.handleMove); this.$document.on(this.endEvent, this.handleEnd);