From 38835e0029a87f290af28018738f32b5ba182f69 Mon Sep 17 00:00:00 2001 From: Radu C Date: Tue, 5 Aug 2014 21:34:32 +0100 Subject: [PATCH 1/5] add onSlideBegin event handler --- src/rangeslider.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/rangeslider.js b/src/rangeslider.js index 855a3a5..5ee7e4e 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -93,6 +93,7 @@ this.endEvent = this.options.endEvent.join('.' + pluginName + ' ') + '.' + pluginName; this.polyfill = this.options.polyfill; this.onInit = this.options.onInit; + this.onSlideBegin = this.options.onSlideBegin; this.onSlide = this.options.onSlide; this.onSlideEnd = this.options.onSlideEnd; @@ -177,6 +178,10 @@ this.$document.on(this.moveEvent, this.handleMove); this.$document.on(this.endEvent, this.handleEnd); + if (this.onSlideBegin && typeof this.onSlideBegin === 'function') { + this.onSlideBegin(this.position, this.value); + } + // If we click on the handle don't set the new position if ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1) { return; From c4c5e567f22c8d2cf1721a4d823cd230af46a843 Mon Sep 17 00:00:00 2001 From: Radu C Date: Thu, 7 Aug 2014 23:49:59 +0100 Subject: [PATCH 2/5] Always update the slider when a "change" event is received. Sometimes there's a race condition when laying out the slider and we get a size of zero. This kind of fixes the problem for my use case. No idea about the general case. --- src/rangeslider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index 5ee7e4e..6360903 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -143,9 +143,9 @@ return; } - var value = e.target.value, - pos = _this.getPositionFromValue(value); - _this.setPosition(pos); + var value = e.target.value; + _this.value = value; + _this.update(); }); } From 4d6614e40a8f3b49bfbf98dc14218b155b35b3bc Mon Sep 17 00:00:00 2001 From: Radu C Date: Thu, 14 Aug 2014 14:00:45 +0100 Subject: [PATCH 3/5] Support readonly attribute --- src/rangeslider.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/rangeslider.js b/src/rangeslider.js index 6360903..4c2bb30 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -175,6 +175,11 @@ Plugin.prototype.handleDown = function(e) { e.preventDefault(); + + if (this.$element.is('[readonly]')) { + return; + } + this.$document.on(this.moveEvent, this.handleMove); this.$document.on(this.endEvent, this.handleEnd); From 7e3c86b8bcadae96f5f534298129d10d5d697164 Mon Sep 17 00:00:00 2001 From: uplink03 Date: Fri, 27 Mar 2015 18:59:51 +0000 Subject: [PATCH 4/5] enhancements --- src/rangeslider.js | 40 +++++++++++++++++++++++++++++++++++----- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index 4c2bb30..6ae62ed 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -1,3 +1,5 @@ +/*! rangeslider.js - v0.3.2 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */ +/* with onSlideBegin handler by Dianemo */ (function(factory) { 'use strict'; @@ -29,9 +31,12 @@ pluginInstances = [], inputrange = supportsRange(), defaults = { + touchHandleOnly: true, + handleHiddenUntilTouched: false, polyfill: true, rangeClass: 'rangeslider', disabledClass: 'rangeslider--disabled', + hiddenClass: 'rangeslider--hidden', fillClass: 'rangeslider__fill', handleClass: 'rangeslider__handle', startEvent: ['mousedown', 'touchstart', 'pointerdown'], @@ -135,7 +140,8 @@ delay(function() { _this.update(); }, 300); }, 20)); - this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown); + //this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown); + this.$range.on(this.startEvent, this.handleDown); // Listen to programmatic value changes this.$element.on('change' + '.' + pluginName, function(e, data) { @@ -153,6 +159,11 @@ if (this.onInit && typeof this.onInit === 'function') { this.onInit(); } + + if (this.options.handleHiddenUntilTouched) { + this.$range.addClass(this.options.hiddenClass); + } + this.update(); }; @@ -174,12 +185,24 @@ }; Plugin.prototype.handleDown = function(e) { - e.preventDefault(); - if (this.$element.is('[readonly]')) { return; } + if (this.$range.hasClass(this.options.disabledClass)) { + return; + } + + var handleTouched = ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1); + if (this.options.touchHandleOnly && !handleTouched) { + return; + } + + this.$range.removeClass(this.options.hiddenClass); + + e.preventDefault(); + e.stopPropagation(); + this.$document.on(this.moveEvent, this.handleMove); this.$document.on(this.endEvent, this.handleEnd); @@ -188,7 +211,7 @@ } // If we click on the handle don't set the new position - if ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1) { + if (handleTouched) { return; } @@ -204,15 +227,21 @@ Plugin.prototype.handleMove = function(e) { e.preventDefault(); + e.stopPropagation(); var posX = this.getRelativePosition(this.$range[0], e); this.setPosition(posX - this.grabX); }; Plugin.prototype.handleEnd = function(e) { e.preventDefault(); + e.stopPropagation(); this.$document.off(this.moveEvent, this.handleMove); this.$document.off(this.endEvent, this.handleEnd); + if (this.options.handleHiddenUntilTouched) { + this.$range.addClass(this.options.hiddenClass); + } + if (this.onSlideEnd && typeof this.onSlideEnd === 'function') { this.onSlideEnd(this.position, this.value); } @@ -279,7 +308,8 @@ }; Plugin.prototype.destroy = function() { - this.$document.off(this.startEvent, '#' + this.identifier, this.handleDown); + //this.$document.off(this.startEvent, '#' + this.identifier, this.handleDown); + this.$range.off(this.startEvent, this.handleDown); this.$element .off('.' + pluginName) .removeAttr('style') From a9af5330a3f464fcd42f5725cd046d6d0a06c9af Mon Sep 17 00:00:00 2001 From: uplink03 Date: Mon, 30 Mar 2015 22:52:29 +0100 Subject: [PATCH 5/5] make work when translated --- src/rangeslider.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index 6ae62ed..2d5a044 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -275,12 +275,7 @@ }; Plugin.prototype.getPositionFromNode = function(node) { - var i = 0; - while (node !== null) { - i += node.offsetLeft; - node = node.offsetParent; - } - return i; + return node.getBoundingClientRect().left; }; Plugin.prototype.getRelativePosition = function(node, e) {