Replace touch and mouse events with pointer events

The library currently uses mouse and touch event bindings from V1 when IE11 was supported. All currently targeted browsers support pointer events so they should be used instead.

See https://github.com/nerdyman/react-compare-slider/commit/5c84c5c7334dd2724d12a4c6e0eba043dd6aa687 (full file here) for a reference implementation.

Requirements

• Add touchAction: 'none' style property to root element
• Replace mousedown event binding with pointerdown
• Remove touchstart event binding
• Update mouse and touch handlers to replace MouseEvent | TouchEvent with PointerEvent
• Remove instanceof ternaries in mouse and touch handlers, we can use ev.pageX and ev.pageY

Testing

• Test on iOS Safari
• Test on Firefox Android
• Test on Chrome Safari
• Test on Android Chrome
• Test on Desktop Safari
• Test on Desktop Chrome
• Test on Desktop Firefox

Notes

Some automated testing with Storybook has been set up in #65 so it’s probably worth waiting for that to be merge before starting this.

[muditchoudhary]

@nerdyman If this issue requires the work of just replacing the events in the code I could do that. I’ll try to fix this issue with the help of your PR. If I will not able to do it I’ll tell you.

[nerdyman]

@muditchoudhary Those events need removed/replaced with pointerup and pointermove events. I’ve updated the description for this issue to include links to the full file and also to the previously closed PR. Note that the linked PR also includes a new transition feature, that feature is not part of this ticket, just the pointer events changes listed in the description of this issue.

Here’s a link to the diff for the pointer events in that PR. The styles for the root element are in rootStyles in the main component.

The linked PR should have everything needed to check the requirements for this PR. This isn’t the simplest issue so if you’d like something else for Hacktoberfest #75 is also open.