diff --git a/src/js/InputRangeSlider.js b/src/js/InputRangeSlider.js index 052920d..435d430 100644 --- a/src/js/InputRangeSlider.js +++ b/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"> diff --git a/src/js/InputRangeTrack.js b/src/js/InputRangeTrack.js index 7b263ec..81a3e84 100644 --- a/src/js/InputRangeTrack.js +++ b/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,6 +62,12 @@ class InputRangeTrack extends React.Component { this.props.onTrackMouseDown(this, position); } + handleTouchStart(event) { + event.preventDefault(); + + this.handleMouseDown(event); + } + // Render render() { const activeTrackStyle = this.state.activeTrackStyle || {}; @@ -65,6 +75,7 @@ class InputRangeTrack extends React.Component { return (