Slider does not work in Chrome #1745

watta90 · 2015-09-28T15:16:02Z

Slider does not work in Chrome 45.0.2454.101 nor in Microsoft Edge. I can't drag the object and the console does not output any error.

shaurya947 · 2015-09-28T19:16:23Z

@vatanbytyqi I can't test with Microsoft edge, but it seems to be working for me in the version of Chrome that you mentioned:

Could you double check by navigating to the documentation site on Chrome?

watta90 · 2015-09-29T08:23:35Z

Hi,

I'm running on windows 10 and it does not work as it shows in your gif.
My version of chrome has also an 'm' at the end:
45.0.2454.101 m

I'm able to change the slider by clicking on the position of the bar where the value should be set. This only works if I don't start draging the slider at first but directly clicking on the bar. If I drag the slider then I'm not able to click on the bar to change the value.

shaurya947 · 2015-09-29T15:04:14Z

@vatanbytyqi I see. I'm running Mac OS so I'll have to check this out on a Windows machine.

duncandrennan · 2015-09-30T20:42:14Z

I'm running Windows 7, Chrome Version 45.0.2454.101 m, and the sliders on the material-ui.com website (or in my own app) don't work for me either. I did figure out that this appears to be related to the slider beacon animation. If I wait until the "pulse" of the beacon is finished, then click at a point on the slider it moves. Click and hold never works (the animation is always midway, while holding).

To get it to move I have to click on the beacon, wait for the "pulse" to finish, then click somewhere else on the slider, wait for the animation to finish, then click somewhere else.

If I click+hold on the beacon, then click somewhere else before the animation is finished, it stops working entirely until I click on the beacon again and wait for the animation to finish.

duncandrennan · 2015-10-01T09:37:07Z

I've been looking at this some more and observed the following:

If I try to drag the slider then the containing tag gets a class="react-draggable-dragging" which does not go away after releasing the control. If I drag again, then it adds another "react-draggable-dragging", i.e. DOM shows,

<body class="   react-draggable-dragging react-draggable-dragging"

If I refresh and start again then click and hold (without actually dragging) and then release, the class=" react-draggable-dragging" appears while click+holding, then disappears on release.

Possibly an issue either with the underlying "react-draggable2" or how it is implemented?

duncandrennan · 2015-10-01T17:57:30Z

The onDrag event of the slider is not firing. That means it never actually hits the _onDragUpdate event resulting in no changes. After dragging and releasing it never hits _onDragStop. Clicking and holding, then releasing (no dragging movement) causes _onDragStop to fire correctly, which correctly resets the state of the slider.

Not too sure why that isn't firing, but looking at the demo of react-draggable2, that does fire the onDrag function as expected.

duncandrennan · 2015-10-02T11:39:08Z

I checked this out on a colleague's computer and it worked for him in both Chrome and Firefox on Windows 8. I also came across this issue react-grid-layout/react-grid-layout#29 about dragging not working due to touch screen detection.

I then tried forcing isTouchDevice to false in react-draggable2 and that resulted in the sliders actually working! The problem seems to lie with how react-draggable2 detects touch screens - it may not be reliable for all cases (my laptop is not a touch screen, but the windows settings treat it like one). Also, there may be screens which can be either touch or mouse.

I then saw a different issue with the slider handle drifting away from the mouse pointer, but that is a separate concern.

watta90 · 2015-10-02T12:09:22Z

I believe you have pinpointed the cause of the issue. My screen works as a touch screen aswell and when I use my finger the slider works :)

igorbt · 2015-10-07T11:25:13Z

@vatanbytyqi can you please check if my PR (#1825) fixes your issue? I removed react-draggable dependency at all and in my solution I don't use any touch device detection. So, if your mouse initiated dragging with mousedown then mousemove will be used for moving the handle.

watta90 · 2015-10-07T12:55:41Z

@igorbt how can I install your branch which has the fix? I tried this:
npm install git+ssh://[email protected]:igorbt/material-ui.git --save

This will add material-ui in node_package where all the other packages are but when I run webpack to generate my app.js I get an error that material-ui can not be found.

If I install the master branch with npm install matarial-ui --save then I don't get any error when I run webpack.

shaurya947 · 2015-10-07T16:19:53Z

@vatanbytyqi there is another slightly round-about way too: First, run npm install material-ui in your project as regular.

Next, clone @igorbt's repo and check out the branch with the fix using git checkout slider-fix. In this branch, run npm install. This will compile all source files into the lib folder. Now you can use this lib folder to replace the lib folder inside your node_modules/material-ui/ directory in your project.

watta90 · 2015-10-08T07:51:51Z

thanks @shaurya947 , I managed to complie it but with some errors that I don't think has to do with the clone itself but with my setup. Either way here is the error:

    npm ERR! Windows_NT 10.0.10240
npm ERR! argv "c:\\Program Files (x86)\\nodejs\\node.exe" "c:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.1.0
npm ERR! npm  v2.14.3
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!

npm ERR! Please include the following file with any support request:

@igorbt your fix did work for my chrome, firefox and edge.

shaurya947 · 2015-10-08T14:40:54Z

@vatanbytyqi that's probably because npm is pulling the latest version of React (0.14 was released yesterday).

We uploaded a new package to npm that has a temporary fix for loafing React 0.13. So if you do get the latest code from master / npm now, this error shouldn't occur.

igorbt · 2015-10-08T19:54:10Z

Thanks guys! Good to know that fix worked.

igorbt · 2015-10-15T20:01:53Z

@vatanbytyqi bug was fixed in PR #1825 and merged, please retest and close.

duncandrennan · 2015-10-16T07:37:33Z

I just checked this quickly using the http://material-ui.com site, but the sliders don't work there - has that been updated?

shaurya947 · 2015-10-16T13:08:05Z

Not yet.. Not until we do a new release.
On Oct 16, 2015 2:37 AM, "Duncan Drennan" [email protected] wrote:

I just checked this quickly using the http://material-ui.com site, but
the sliders don't work there - has that been updated?

—
Reply to this email directly or view it on GitHub
#1745 (comment)
.

alitaheri · 2015-12-08T23:27:50Z

This was fixed and introduced in a release.

shaurya947 added the bug 🐛 Something doesn't work label Sep 30, 2015

igorbt mentioned this issue Oct 8, 2015

[Slider] removed react-draggable dependency (fixes IE!) #1825

Merged

alitaheri added Cross Browser Support and removed bug 🐛 Something doesn't work labels Dec 8, 2015

alitaheri closed this as completed Dec 8, 2015

oliviertassinari added the component: slider This is the name of the generic UI component, not the React module! label Aug 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slider does not work in Chrome #1745

Slider does not work in Chrome #1745

watta90 commented Sep 28, 2015

shaurya947 commented Sep 28, 2015

watta90 commented Sep 29, 2015

shaurya947 commented Sep 29, 2015

duncandrennan commented Sep 30, 2015

duncandrennan commented Oct 1, 2015

duncandrennan commented Oct 1, 2015

duncandrennan commented Oct 2, 2015

watta90 commented Oct 2, 2015

igorbt commented Oct 7, 2015

watta90 commented Oct 7, 2015

shaurya947 commented Oct 7, 2015

watta90 commented Oct 8, 2015

shaurya947 commented Oct 8, 2015

igorbt commented Oct 8, 2015

igorbt commented Oct 15, 2015

duncandrennan commented Oct 16, 2015

shaurya947 commented Oct 16, 2015

alitaheri commented Dec 8, 2015

Slider does not work in Chrome #1745

Slider does not work in Chrome #1745

Comments

watta90 commented Sep 28, 2015

shaurya947 commented Sep 28, 2015

watta90 commented Sep 29, 2015

shaurya947 commented Sep 29, 2015

duncandrennan commented Sep 30, 2015

duncandrennan commented Oct 1, 2015

duncandrennan commented Oct 1, 2015

duncandrennan commented Oct 2, 2015

watta90 commented Oct 2, 2015

igorbt commented Oct 7, 2015

watta90 commented Oct 7, 2015

shaurya947 commented Oct 7, 2015

watta90 commented Oct 8, 2015

shaurya947 commented Oct 8, 2015

igorbt commented Oct 8, 2015

igorbt commented Oct 15, 2015

duncandrennan commented Oct 16, 2015

shaurya947 commented Oct 16, 2015

alitaheri commented Dec 8, 2015