rangetouch

rangetouch copied to clipboard

We've been using range touch and noticed issues from iOS 11.3 and on. The issue is that after dragging the slider, all click events have the range input as target and source, no matter where on the page.

This might or might not be an issue with rangetouch, but removing rangetouch fixed this issue for us.

I am seeing this as well. I forked it and bound the ontouchstart/ontouchend/etc. events to only the range inputs instead of document.body and it fixed the issue.

Apologies. I’ll look at this ASAP.

Sam

On 29 May 2018, at 5:56 pm, Sam Chung [email protected] wrote:

I am seeing this as well. I forked it and bound the ontouchstart/ontouchend/etc. events to only the range inputs instead of document.body and it fixed the issue.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

Any updates on this?

Possible solution based on the idea that @tieoneease mentioned:

Replace the document.body event listener attaching with adding the listeners to input ranges instead:

 // Event listeners
  function addListeners() {
    var elements = document.querySelectorAll('input[type="range"]');
    for (var i = 0; i < elements.length; i++) {
      on(elements[i], settings.events.start, set);
      on(elements[i], settings.events.move, set);
      on(elements[i], settings.events.end, set);
    }
  }

  function clearListeners() {
    var elements = document.querySelectorAll('input[type="range"]');
    for (var i = 0; i < elements.length; i++) {
      elements[i].removeEventListener(settings.events.start, set);
      elements[i].removeEventListener(settings.events.move, set);
      elements[i].removeEventListener(settings.events.end, set);
    }
  }

If input fields get dynamically added/removed, you can call rangetouch.reload() and the input fields get the events again.

// Run setup automatically
  setup();

  return {
    set: function (setting, value) {
      settings[setting] = value;
    },
    reload: function () {
      clearListeners();
      addListeners();
    }
  };

Tested on iPhone 7 with iOS version 12.0.1.

You could omit the need for the reload and do it all dynamically using a MutationObserver. I'll try and take a look asap. If anyone comes up with a PR in the meantime that'd be cool. As I say, using MutationObserver would be best I'd say.

Hey guys, sorry for the delay. There's a new v2.0.0-beta.1 that no longer uses event delegation and instead is using a proper ES6 class so must be setup per input. There's also a static RangeTouch.setup() method that allows you to setup multiple inputs and returns an array of the references to the instances so you can destroy them etc. I think this will improve support for frameworks like React where you can import the lib and setup RangeTouch in your component. Give it a go and give feedback if you can. I'm still testing myself (hence beta) so there may be bugs.

I was glad to see this issue because I think this has been what has often been blocking clicks (on iOS) of my Wistia video play/pause. I've been using RangeTouch 1.0.2. I'm trying to upgrade to 2.0.0 now but can't get it working at all (either using require('rangetouch'); via Webpack or just using <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script> in head).

Actually I'm now using <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script>, and I think it at least loads. Thanks. I'll know over time whether it solves this issue #11. I assume so.

I'm using "[email protected]", which seems to use "webpack": "^4.27.1", which seems to be unable to import ES6-style. My next task: I really want to figure out how to import webpack-style. Any tips would be appreciated.

I didn't figure out a great way yet to use import in my JS files that already use require().

But in Laravel mix, I remembered I can do this: mix.copyDirectory('resources/assets/js/endpoints/vendor', 'public/js/vendor'); https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack/33374807#comment98267765_27639005

So at least now I have a local copy of rangetouch in the right place and can include the script in head.