Slider: Slider gets stuck to mouse

[badaljain]

Hi, Sometimes the slider gets stuck to mouse and the slider just follows the movement of the cursor.

Its hard to reproduce the issue and only way to resolve is to reload the page.

[benjycui]

Please provide a re-producible demo: http://codepen.io/benjycui/pen/aJooRE?editors=0011

And steps to re-produce it..

[TheImpressionist]

Can confirm it's happening to me as well. Hard to reproduce. It seems it happens at random.

[eddyerburgh]

@benjycui Steps to reproduce on your codepen link - http://codepen.io/benjycui/pen/aJooRE?editors=0011:

1. Click on handle
2. While holding click, move cursor over codepen JS panel
3. Keep holding click, move cursor to opposite side of page
4. Release click and return to slider window
5. Cursor will be stuck.
6. Click on handle, if it becomes unstuck - repeat step 1 - 5

[benjycui]

@eddyerburgh thx, but I can re-produce it after trying 3 times.

[eddyerburgh]

I'm on OSX Sierra 10.12.3, chrome 57.0.2987.

Reproducible every time.

[rmammina]

I get the same thing

[dwighthouse]

Looks like the issue is related to the page losing the mouseup event to cancel the dragging feature on the page. Might be fixed by setting up the mousemove listener to check for the left mouse button being down every event. If any mousemove event during a dragging does not have the left mouse button active, cancel the drag immediately.

[benjycui]

Sorry.. I don't understand even I look at your GIF for a long time.

If someone can re-produce this with a unit test, it will be better.

So, PR is welcomed, and please add a unit test for this. Thanks.

[ContiGabriel]

Anyone found a solution for that issue?

[Abcmsaj]

Video of issue: https://streamable.com/1u6k5

When dragging cursor and lifting mouse button up when NOT on the white-backgrounded area of your codepen (https://codepen.io/benjycui/pen/aJooRE?editors=0011) (i.e. the Start Menu bar or on the desktop or the console within the browser), the slider doesn't register that you've moused-up and let go of it, so it will continue to follow your cursor around.

Even when clicking on the slider and dragging, it doesn't reset it - only fix is refresh

[paranoidjk]

@Abcmsaj I watched your demo, seems there do have a problem. But none of out team have windows computer, and i test this demo on osx, it works fine.

So, would you like to give us a PR to fix it?

[eddyerburgh]

@paranoidjk this is an issue on OSX too.

[paranoidjk]

@eddyerburgh Sorry, i haven't figure out how to reproduce this problem on osx, could you give me a screenshot?

[eddyerburgh]

@paranoidjk Have you tried the steps in my earlier comment? I just tried again and after 3 repeats of steps 1-5 I reproduced the bug.

I added a GIF as well, although I'm not sure how useful it is.

[Abcmsaj]

@eddyerburgh Could record a video with Quicktime Player's screen recording, if that would help? Essentially though, you're just grabbing the slider, moving the cursor over the js panel and then letting go.

[eddyerburgh]

@Abcmsaj yeah, basically dragging over the js panel and off the side of the screen then letting go

I'll try and record a video later 👍

[monsieurnebo]

Same issue here, on OSX.

Is there any way of "dropping" the handle by a slider API property ? We could fire this on a mouseup event listening to the document.

[Robin-front]

It's easy to re-produce with iframe.

as @monsieurnebo said. We could removeEventListener on mouseup. but I think also before addEventListener. Since when your mouse leave iframe, mouseup won't be trigger, and then came back iframe to click again, another event will be add. cause the bug event always there.

Another resolvent is collect the event with array, and remove them all when mouseup.

[jitao13]

Is this problem solved now?
Can you tell me the solution？

[monsieurnebo]

@jitao13 Nop... We are waiting for this pull request since August.

[paranoidjk]

Sorry for the late.

Thanks for @Robin-front , #306 already got merged. Released [email protected], please give it a try.

[jitao13]

The problem will be repeated on the PC. And in the Chrome.

Press the mouse to move the button, move the mouse over the iframe area, release the mouse, move back inside the iframe, and the button will still move with the mouse.

https://user-images.githubusercontent.com/6723674/29201185-a73d6a4c-7e8e-11e7-9d9c-8dd21af29014.gif

[Robin-front]

Yes, this problem wasn't resolved completely.

But, the result of this discussion is

@monsieurnebo find a way of "dropping" the handle

By now, you can click the handle or anywhere of document to drop off the handle without refresh.