Added tocuh controls to the Number Slider Controller to allow dragging of sliders on touch interfaces e.g. tablets

build/dat.gui.js

@@ -2138,6 +2138,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    _this2.__foreground = document.createElement('div');
 	
 	    _dom2.default.bind(_this2.__background, 'mousedown', onMouseDown);
+	    _dom2.default.bind(_this2.__background, 'touchstart', onTouchStart);
 	
 	    _dom2.default.addClass(_this2.__background, 'slider');
 	    _dom2.default.addClass(_this2.__foreground, 'slider-fg');
@@ -2151,19 +2152,60 @@ return /******/ (function(modules) { // webpackBootstrap
 	      onMouseDrag(e);
 	    }
 	
-	    function onMouseDrag(e) {
+	    function onTouchStart(e) {
-	      e.preventDefault();
+	      document.activeElement.blur();
 	
+	      _dom2.default.bind(window, 'touchmove', onTouchMove);
+	      _dom2.default.bind(window, 'touchend', onTouchEnd);
+	
+	      _this.__activeTouch = e.targetTouches[0];
+	
+	      onTouchMove(e);
+	    }
+	
+	    function onMouseDrag(e) {
+	      // e.preventDefault();
+	
+	      onDrag(e.clientX);
+	    }
+	
+	    function onTouchMove(e) {
+	      // e.preventDefault();
+	
+	      var changed = e.changedTouches;
+	
+	      for (var i = 0; i < changed.length; i++) {
+	        if (changed[i].identifier === _this.__activeTouch.identifier) {
+	          onDrag(changed[i].clientX);
+	        }
+	      }
+	    }
+	
+	    function onDrag(clientX) {
 	      var bgRect = _this.__background.getBoundingClientRect();
 	
-	      _this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
+	      _this.setValue(map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
 	
 	      return false;
 	    }
 	
+	    function onTouchEnd() {
+	      _dom2.default.unbind(window, 'touchmove', onMouseDrag);
+	      _dom2.default.unbind(window, 'touchend', onMouseUp);
+	
+	      _this.__activeTouch = null;
+	
+	      moveFinish();
+	    }
+	
 	    function onMouseUp() {
 	      _dom2.default.unbind(window, 'mousemove', onMouseDrag);
 	      _dom2.default.unbind(window, 'mouseup', onMouseUp);
+	
+	      moveFinish();
+	    }
+	
+	    function moveFinish() {
 	      if (_this.__onFinishChange) {
 	        _this.__onFinishChange.call(_this, _this.getValue());
 	      }
@@ -3965,7 +4007,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 19 */
 /***/ function(module, exports) {
 
-	module.exports = "<div id=\"dg-save\" class=\"dg dialogue\">\n\n  Here's the new load parameter for your <code>GUI</code>'s constructor:\n\n  <textarea id=\"dg-new-constructor\"></textarea>\n\n  <div id=\"dg-save-locally\">\n\n    <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\n    values to <code>localStorage</code> on exit.\n\n    <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\n      override those passed to <code>dat.GUI</code>'s constructor. This makes it\n      easier to work incrementally, but <code>localStorage</code> is fragile,\n      and your friends may not see the same values you do.\n\n    </div>\n\n  </div>\n\n</div>";
+	module.exports = "<div id=\"dg-save\" class=\"dg dialogue\">\r\n\r\n  Here's the new load parameter for your <code>GUI</code>'s constructor:\r\n\r\n  <textarea id=\"dg-new-constructor\"></textarea>\r\n\r\n  <div id=\"dg-save-locally\">\r\n\r\n    <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\r\n    values to <code>localStorage</code> on exit.\r\n\r\n    <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\r\n      override those passed to <code>dat.GUI</code>'s constructor. This makes it\r\n      easier to work incrementally, but <code>localStorage</code> is fragile,\r\n      and your friends may not see the same values you do.\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>";
 
 /***/ },
 /* 20 */

src/dat/controllers/NumberControllerSlider.js

@@ -46,6 +46,7 @@ class NumberControllerSlider extends NumberController {
     this.__foreground = document.createElement('div');
 
     dom.bind(this.__background, 'mousedown', onMouseDown);
+    dom.bind(this.__background, 'touchstart', onTouchStart);
 
     dom.addClass(this.__background, 'slider');
     dom.addClass(this.__foreground, 'slider-fg');
@@ -59,21 +60,62 @@ class NumberControllerSlider extends NumberController {
       onMouseDrag(e);
     }
 
-    function onMouseDrag(e) {
+    function onTouchStart(e) {
-      e.preventDefault();
+      document.activeElement.blur();
 
+      dom.bind(window, 'touchmove', onTouchMove);
+      dom.bind(window, 'touchend', onTouchEnd);
+
+      _this.__activeTouch = e.targetTouches[0];
+
+      onTouchMove(e);
+    }
+
+    function onMouseDrag(e) {
+      // e.preventDefault();
+
+      onDrag(e.clientX);
+    }
+
+    function onTouchMove(e) {
+      // e.preventDefault();
+
+      const changed = e.changedTouches;
+
+      for (let i = 0; i < changed.length; i++) {
+        if (changed[i].identifier === _this.__activeTouch.identifier) {
+          onDrag(changed[i].clientX);
+        }
+      }
+    }
+
+    function onDrag(clientX) {
       const bgRect = _this.__background.getBoundingClientRect();
 
       _this.setValue(
-        map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)
+        map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)
       );
 
       return false;
     }
 
+    function onTouchEnd() {
+      dom.unbind(window, 'touchmove', onMouseDrag);
+      dom.unbind(window, 'touchend', onMouseUp);
+
+      _this.__activeTouch = null;
+
+      moveFinish();
+    }
+
     function onMouseUp() {
       dom.unbind(window, 'mousemove', onMouseDrag);
       dom.unbind(window, 'mouseup', onMouseUp);
+
+      moveFinish();
+    }
+
+    function moveFinish() {
       if (_this.__onFinishChange) {
         _this.__onFinishChange.call(_this, _this.getValue());
       }