search

kennethkalmer / ember-cli-nouislider

{{range-slider}} component for ember-cli powered by noUiSlider
http://kennethkalmer.github.com/ember-cli-nouislider
MIT License
44 stars 52 forks source link

Multiple sliders updating simultaneously on mobile devices #47

Open PieterJanVdb opened 7 years ago

PieterJanVdb commented 7 years ago

I'm currently using the plugin (last version) to render three sliders on the page in this fashion:

{{range-slider score=score start=value range=range step=step on-change="change" on-update="update"}}

Using a mouse I can slide them all independently and it works perfectly fine. However, on eg. a tablet, if I move the slider on one of the three and then proceed to move the slider on another, both sliders will move at the same time. If I then move the third slider, all three sliders will synchronise and move at the same time. I can even kind of slide my finger somewhere else on the page (not on any of the three sliders) and all three sliders will update.

Here's a video demonstrating the issue: https://streamable.com/bm2qt

The issue is fixed by removing the on-update action handler (handles the 'update' events), but then the values next to the slider are not updated.

I've done some digging and it seems as if the 'touchend' event (browser) is not being fired 90% of the time when lifting my finger of the screen (happens on both iOS and Android devices). As a result the 'change' and 'end' events of nouislider are not being fired either and I suppose this is where the problem lies?

Any help would be greatly appreciated!

PieterJanVdb commented 7 years ago

Update: the error mostly occurred because in the update action, I would also then set the start value on the range-slider and it would kind of lose its mind.

However, I do continuously get the following error while dragging (mobile):

Uncaught TypeError: Cannot read property 'pageX' of undefined

Everything works fine but the error is fairly annoying. At some point is has also happened that I can not click on anything else in the view as the browser (mobile) supposedly still thinks it's scrolling afaik.

kennethkalmer commented 7 years ago

Thanks for doing this investigation! I'm a bit swamped at the moment and will have a look by the weekend how to get this fixed for you!

kennethkalmer commented 6 years ago

@PieterJanVdb, I wonder if leongersen/noUiSlider#793 doesn't solve the issue. As of 2c57d2b414 we have nouislider 10.1.0 in with multitouch support, and as of 6c22ff89f I exposed the multitouch option. I'm going to try and replicate the issue myself now.

kennethkalmer commented 6 years ago

@PieterJanVdb I would really like to get to the bottom of this, but I'm a bit lost.

Would it be possible for you to give me some sample code that shows the issue? You can create an Ember Twiddle and amend the addons section of twiddle.json to look like this:

  "addons": {
    "ember-cli-nouislider": "0.14.1"
  }

It will then install ember-cli-nouislider as per 6c22ff89f8, and we can figure it out.