Materialize: Range/noUiSlider control malfunctioning on touch devices

[Tomer1c]

If you use the "Range"-control/noUiSlider (e.g. the demo http://materializecss.com/forms.html) on mobile devices, it catches the focus and does not release it again.
Means: You cannot use any other control any more.

To reproduce:

1. Shift a handle of the noUISlider with your finger
2. Shift the other handle or try to use another control

If it does not immediately "glue" on your finger, try it a second or third time.

I've tested with various Apple devices and a Google Nexus. No problems on desktops.
The original noUiSlider does not show this behaviour.

Appendix:
Can happen on desktop browsers as well, although more difficult to reproduce.
Overwriting nouislider.min.js from https://refreshless.com/nouislider/ seems to fix this bug.

[Dahkon]

Got the same issues.
noUi-slider v11 seems to correct the problem but the materialize custom css must be changed a lot...

[Syndlex]

@Tomer1c which version of nouislider did you used to fix this bug?

11.0.3 Kills the CSS from Materialize.

[Tomer1c]

@Syndlex: I "mixed in" NoUISlider 10.0.0 from 5/2017.

[artus9033]

+1 for that, the issue is still present. Any progress on this?

[fashionpoolpdev]

HTML5 Range component seems to exhibit a problem where touchleave event is not triggered (on touch devices and chrome68 testing environment) and so, thumb bubble does not get released.

I've tweeked materialize.js and replaced touchleave event to touchend. Also _handleRangeChange() is triggered right after touchend, so I've also added condition to check "this._mousedown" to avoid thumb bubble popping up right after touchend.

Is touchleave event commonly supported on all browsers?

[trydalcoholic]

For noUiSlider there is a simple fix. To the class .noUi-handle-touch-area add the parameter: z-index: 5. Thus, the touch area will be "higher" than the slider and sticking will disappear.

[dipakchandranp]

+1 issue still exists. Added nouislider directly as dependency and used.

[zekageri]

Issue is still exist

[zekageri]

For noUiSlider there is a simple fix. To the class .noUi-handle-touch-area add the parameter: z-index: 5. Thus, the touch area will be "higher" than the slider and sticking will disappear.

That worked!