Merge pull request #42 from andreruffert/develop

Release v0.2.8

README.md

@@ -10,7 +10,7 @@ Check out the [demo](http://andreruffert.github.io/rangeslider.js/).
 
 
 ##Browser Support
-* Tested in IE8+
+* Tested in IE8+ and all modern Browsers
 
 
 ##Installation

bower.json

@@ -1,15 +1,18 @@
 {
   "name": "rangeslider.js",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "main": "dist/rangeslider.js",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "author": "André Ruffert",
   "license": "MIT",
+  "description": "Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type=\"range\"> slider element",
   "keywords": [
     "input",
     "range",
     "slider",
-    "rangeslider"
+    "rangeslider",
+    "rangeslider.js",
+    "polyfill"
   ],
   "ignore": [
     "**/.*",

dist/rangeslider.js

@@ -1,4 +1,4 @@
-/*! rangeslider.js - v0.2.7 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
+/*! rangeslider.js - v0.2.8 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
 'use strict';
 
 (function (module) {
@@ -21,31 +21,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']
         };
 
     /**
@@ -97,6 +83,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;
@@ -109,9 +98,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      = $('<div class="' + this.options.fillClass + '" />');
         this.$handle    = $('<div class="' + this.options.handleClass + '" />');
@@ -140,7 +129,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) {
@@ -174,8 +163,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) {
@@ -200,8 +189,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') {
@@ -216,14 +205,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';
@@ -271,7 +257,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')

example/index.html

@@ -29,9 +29,20 @@
     </style>
 </head>
 <body>
+    <div>
+        <input type="range" min="0" max="5" data-rangeslider>
+        <br>
+        <br>
+        <input type="range" min="0" max="5" style="width:100%;">
+        <output></output>
+    </div>
+
+    <br>
+    <br>
+
     <div id="js-example-change-value">
         <h2>Programmatic value changes</h2>
-        <input type="range" min="0" max="100" value="50" data-rangeslider>
+        <input type="range" min="10" max="100" data-rangeslider>
         <output></output>
         <input type="number" value="10"><button>Change value</button>
     </div>

package.json

@@ -2,14 +2,16 @@
   "name": "rangeslider.js",
   "title": "rangeslider.js",
   "description": "Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type=\"range\"> 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",