[Slider] Component doesn't allow for preventing event propagation for drag-related event handlers.

Summary

Using <Slider> as a child of a React component that also listens for drag events, when I drag the Slider, the parent component event handlers are triggered. (I think - actually I’m a little out of my depth in terms of how these libraries are handling events and which events are being handled)

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate. To my knowledge this issue hasn’t been raised yet (although it could be related to an issue that I wouldn’t have known to search for - in which case I apologize!)

Example code

This is the most basic usage example of react-beautiful-dnd, with a list of 10 items that can be reordered. Each of these items contains a slider that shows the problem I am experiencing (that the slider’s can’t be dragged without triggering the dnd drag): https://codesandbox.io/s/recursing-nightingale-issyt?fontsize=14&hidenavigation=1&theme=dark (in the Demo.js file)

Current Behavior 😯

When trying to update the slider value by drag, the parent component event handlers are fired (see the demo). Updating the slider value by clicking works fine.

Expected Behavior 🤔

I expected that any event explicitly handled by <Slider> would not then bubble up to parent components. Or, I would like to be able to ‘manually’ prevent this by using ev.stopPropagation. However, having tried this in the onChange event handler I know that this doesn’t work. I assume that the onChange handler is an abstraction over other event handlers that I DON’T have access to?

Steps to Reproduce 🕹

The bug/behaviour (technically I’m not sure that this can be considered a bug per say) is reproduced in the codesanbox example linked to above.

Steps:

1. Try adjusting a slider (it doesn’t work)
2. Change isDragDisabled to true (line 83 of Demo.js), then refresh the page
3. Dragging the slider now works

Context 🔦

I have found that disabling the ability to drag on the parent element allows me to then using the Slider. So, my current workaround is registering onMouseEnter and onMouseLeave handlers that sets a property on the parent component to disable / enable drag. But I think this is probably inefficient… since I imagine that I am rerendering the Draggable component more than I have to (I’m not 100% clear on this).

[oliviertassinari]

@zachsa The Slider has a touch-action CSS property, hence the behavior you are seeing on mobile. The issue is on desktop.

[oliviertassinari]

@brorlarsnicklas You are free to go. It’s interesting to compare the behavior with a native slider. If you could figure out what makes it work correctly in https://codesandbox.io/s/boring-platform-tkel2. It would be awesome.