Handle touch event

Author: davidchin

src/js/InputRangeSlider.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { autobind, extend } from 'InputRangeUtil';
 
+// Enable touch
+React.initializeTouchEvents(true);
+
 class InputRangeSlider extends React.Component {
   constructor(props) {
     super(props);
@@ -14,6 +17,9 @@ class InputRangeSlider extends React.Component {
       'handleMouseDown',
       'handleMouseUp',
       'handleMouseMove',
+      'handleTouchStart',
+      'handleTouchEnd',
+      'handleTouchMove',
       'handleKeyDown',
     ], this);
   }
@@ -49,6 +55,10 @@ class InputRangeSlider extends React.Component {
   }
 
   // Handlers
+  handleClick(event) {
+    event.preventDefault();
+  }
+
   handleMouseDown() {
     const document = this.document;
 
@@ -65,15 +75,32 @@ class InputRangeSlider extends React.Component {
     document.removeEventListener('mouseup', this.handleMouseUp);
   }
 
-  handleClick(event) {
+  handleMouseMove(event) {
+    this.props.onSliderMouseMove(this, event);
+  }
+
+  handleTouchStart(event) {
+    const document = this.document;
+
     event.preventDefault();
+
+    document.addEventListener('touchmove', this.handleTouchMove);
+    document.addEventListener('touchend', this.handleTouchEnd);
   }
 
-  handleMouseMove(event) {
-    // Delegate
+  handleTouchMove(event) {
     this.props.onSliderMouseMove(this, event);
   }
 
+  handleTouchEnd() {
+    const document = this.document;
+
+    event.preventDefault();
+
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('touchend', this.handleTouchEnd);
+  }
+
   handleKeyDown(event) {
     this.props.onSliderKeyDown(this, event);
   }
@@ -101,6 +128,7 @@ class InputRangeSlider extends React.Component {
           onClick={ this.handleClick }
           onKeyDown={ this.handleKeyDown }
           onMouseDown={ this.handleMouseDown }
+          onTouchStart={ this.handleTouchStart }
           role="slider">
         </a>
       </span>

src/js/InputRangeTrack.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { autobind, extend } from 'InputRangeUtil';
 
+// Enable touch
+React.initializeTouchEvents(true);
+
 class InputRangeTrack extends React.Component {
   constructor(props) {
     super(props);
@@ -11,6 +14,7 @@ class InputRangeTrack extends React.Component {
     // Auto-bind
     autobind([
       'handleMouseDown',
+      'handleTouchStart',
     ], this);
   }
 
@@ -49,7 +53,7 @@ class InputRangeTrack extends React.Component {
   // Handlers
   handleMouseDown(event) {
     const trackClientRect = this.clientRect;
-    const { clientX } = event;
+    const { clientX } = event.touches ? event.touches[0] : event;
     const position = {
       x: clientX - trackClientRect.left,
       y: 0,
@@ -58,13 +62,20 @@ class InputRangeTrack extends React.Component {
     this.props.onTrackMouseDown(this, position);
   }
 
+  handleTouchStart(event) {
+    event.preventDefault();
+
+    this.handleMouseDown(event);
+  }
+
   // Render
   render() {
     const activeTrackStyle = this.state.activeTrackStyle || {};
 
     return (
       <div
         onMouseDown={ this.handleMouseDown }
+        onTouchStart={ this.handleTouchStart }
         className="InputRange-track InputRange-track--container">
         <div
           style={ activeTrackStyle }

src/js/InputRangeUtil.js

@@ -2,26 +2,8 @@ function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 
-function assign(target) {
-  const sources = Array.prototype.slice.call(arguments, 1);
-
-  sources.forEach((source) => {
-    if (!source) {
-      return;
-    }
-
-    const keys = Object.keys(source);
-
-    keys.forEach((key) => {
-      target[key] = source[key];
-    });
-  });
-
-  return target;
-}
-
 function extend() {
-  return assign.apply(Object, arguments);
+  return Object.assign.apply(Object, arguments);
 }
 
 function captialize(string) {

src/js/InputRangeValueTransformer.js

@@ -27,8 +27,9 @@ class InputRangeValueTransformer {
   positionFromEvent(event) {
     const trackClientRect = this.component.trackClientRect;
     const length = trackClientRect.width;
+    const { clientX } = event.touches ? event.touches[0] : event;
     const position = {
-      x: clamp(event.clientX - trackClientRect.left, 0, length),
+      x: clamp(clientX - trackClientRect.left, 0, length),
       y: 0,
     };