a?b:a>c?c:a},e.prototype.setPosition=function(a){var b,c;b=this.getValueFromPosition(this.cap(a,0,this.maxHandleX))/this.step*this.step,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)},e.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},e.prototype.getRelativePosition=function(a,b){return(b.pageX||b.originalEvent.clientX||b.originalEvent.touches[0].clientX||b.currentPoint.x)-this.getPositionFromNode(a)},e.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=b*this.maxHandleX},e.prototype.getValueFromPosition=function(a){var b,c;return b=a/this.maxHandleX,c=this.step*Math.ceil((b*(this.max-this.min)+this.min)/this.step),Number(c.toFixed(2))},e.prototype.setValue=function(a){this.$element.val(a).trigger("change",{origin:f})},e.prototype.destroy=function(){this.$document.off(this.startEvent,"#"+this.identifier,this.handleDown),this.$element.off("."+f).removeAttr("style").removeData("plugin_"+f),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0]),g.splice(g.indexOf(this.$element[0]),1),g.length||this.$window.off("."+f)},a.fn[f]=function(b){return this.each(function(){var c=a(this),d=c.data("plugin_"+f);d||(c.data("plugin_"+f,d=new e(this,b)),g.push(this)),"string"==typeof b&&d[b]()})}});
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
index 337af5c..ef2e507 100644
--- a/example/index.html
+++ b/example/index.html
@@ -29,9 +29,20 @@
+
+
+
+
+
+
+
+
+
+
+
Programmatic value changes
-
+
diff --git a/package.json b/package.json
index 3c9a576..1cdfdbf 100644
--- a/package.json
+++ b/package.json
@@ -2,14 +2,16 @@
"name": "rangeslider.js",
"title": "rangeslider.js",
"description": "Simple, small and fast JavaScript/jQuery polyfill for the HTML5 slider element",
- "version": "0.2.7",
+ "version": "0.2.8",
"homepage": "https://github.com/andreruffert/rangeslider.js",
"license": "MIT",
"keywords": [
"input",
"range",
"slider",
- "rangeslider"
+ "rangeslider",
+ "rangeslider.js",
+ "polyfill"
],
"author": {
"name": "André Ruffert",
diff --git a/src/rangeslider.js b/src/rangeslider.js
index 93ad8db..fa7aa83 100644
--- a/src/rangeslider.js
+++ b/src/rangeslider.js
@@ -20,31 +20,17 @@
return input.type !== 'text';
}
- /**
- * Touchscreen detection
- * @return {Boolean}
- */
- function isTouchScreen() {
- var bool = false,
- DocumentTouch = DocumentTouch || {};
- if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
- bool = true;
- }
- return bool;
- }
-
var pluginName = 'rangeslider',
pluginInstances = [],
- touchevents = isTouchScreen(),
inputrange = supportsRange(),
defaults = {
polyfill: true,
rangeClass: 'rangeslider',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',
- startEvent: ((!touchevents) ? 'mousedown' : 'touchstart') + '.' + pluginName,
- moveEvent: ((!touchevents) ? 'mousemove' : 'touchmove') + '.' + pluginName,
- endEvent: ((!touchevents) ? 'mouseup' : 'touchend') + '.' + pluginName
+ startEvent: ['mousedown', 'touchstart', 'pointerdown'],
+ moveEvent: ['mousemove', 'touchmove', 'pointermove'],
+ endEvent: ['mouseup', 'touchend', 'pointerup']
};
/**
@@ -96,6 +82,9 @@
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
+ this.startEvent = this.options.startEvent.join('.' + pluginName + ' ') + '.' + pluginName;
+ this.moveEvent = this.options.moveEvent.join('.' + pluginName + ' ') + '.' + pluginName;
+ this.endEvent = this.options.endEvent.join('.' + pluginName + ' ') + '.' + pluginName;
this.polyfill = this.options.polyfill;
this.onInit = this.options.onInit;
this.onSlide = this.options.onSlide;
@@ -108,9 +97,9 @@
}
this.identifier = 'js-' + pluginName + '-' +(+new Date());
- this.value = parseFloat(this.$element[0].value) || 0;
this.min = parseFloat(this.$element[0].getAttribute('min')) || 0;
this.max = parseFloat(this.$element[0].getAttribute('max')) || 100;
+ this.value = parseFloat(this.$element[0].value) || this.min + (this.max-this.min)/2;
this.step = parseFloat(this.$element[0].getAttribute('step')) || 1;
this.$fill = $('');
this.$handle = $('');
@@ -139,7 +128,7 @@
delay(function() { _this.update(); }, 300);
}, 20));
- this.$document.on(this.options.startEvent, '#' + this.identifier, this.handleDown);
+ this.$document.on(this.startEvent, '#' + this.identifier, this.handleDown);
// Listen to programmatic value changes
this.$element.on('change' + '.' + pluginName, function(e, data) {
@@ -173,8 +162,8 @@
Plugin.prototype.handleDown = function(e) {
e.preventDefault();
- this.$document.on(this.options.moveEvent, this.handleMove);
- this.$document.on(this.options.endEvent, this.handleEnd);
+ this.$document.on(this.moveEvent, this.handleMove);
+ this.$document.on(this.endEvent, this.handleEnd);
// 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) {
@@ -199,8 +188,8 @@
Plugin.prototype.handleEnd = function(e) {
e.preventDefault();
- this.$document.off(this.options.moveEvent, this.handleMove);
- this.$document.off(this.options.endEvent, this.handleEnd);
+ this.$document.off(this.moveEvent, this.handleMove);
+ this.$document.off(this.endEvent, this.handleEnd);
var posX = this.getRelativePosition(this.$range[0], e);
if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
@@ -215,14 +204,11 @@
};
Plugin.prototype.setPosition = function(pos) {
- var left = this.cap(pos, 0, this.maxHandleX),
- value = this.getValueFromPosition(left);
+ var value, left;
// Snapping steps
- if (this.step !== 1) {
- left = this.getPositionFromValue(value);
- value = (this.getValueFromPosition(left) / this.step) * this.step;
- }
+ value = (this.getValueFromPosition(this.cap(pos, 0, this.maxHandleX)) / this.step) * this.step;
+ left = this.getPositionFromValue(value);
// Update ui
this.$fill[0].style.width = (left + this.grabX) + 'px';
@@ -270,7 +256,7 @@
};
Plugin.prototype.destroy = function() {
- this.$document.off(this.options.startEvent, '#' + this.identifier, this.handleDown);
+ this.$document.off(this.startEvent, '#' + this.identifier, this.handleDown);
this.$element
.off('.' + pluginName)
.removeAttr('style')