fix(slider): support mouse & touch all the time

[mhthies]

Description

As proposed in #1988, I did a rework of the touch event handling of the slider component. The new touch event code

• does not prevent mouse input (fixes [slider] cannot move slider using mouse on iPad #1988)
• tracks Touch identifier to avoid confusion by other fingers on the touch screen
• handles touchcancel events in a sensible way
• does no dynamic binding and unbinding to all touch events on the page. In combination with the second point, this enables multitouch sliding of multiple sliders on the same page (I know, nobody asked for this, but it works. ;) ) – Unfortunately, multitouch sliding of the first and second thumb of the same slider is not easy to implement due global state within each slider module.
• only binds to touchstart events on the .thumb element to avoid accidential sliding while scrolling the page on a mobile device (obsoletes [slider] Add option to disable touch-/mouse-sliding on the track #1987)

The last point can be considered a disadvantage/regression compared to the old code, if you consider touch-sliding anywhere on the slider as a feature. However, in my experience, it's really annoying to change a slider position (which has immediate real-world effects in my home automation software) when scrolling the page and accidentially hitting a slider. Using the mouse, one can still slide the slider anywhere on its track.

Testcase

https://jsfiddle.net/jyg4wtcq/
https://fomantic-ui.com/jsfiddle/#!/jyg4wtcq (for mobile devices)

Screenshot (if possible)

--

Closes

• [slider] cannot move slider using mouse on iPad #1988
• [slider] Add option to disable touch-/mouse-sliding on the track #1987

[lubber-de]

Very well done PR so far 👍🏼
Thank you!

I only found a typo and have a question. Please see my comments.

A little additional request when done/answered:
Please provide two links for jsfiddle testing for this:

• The usual one (jsfiddle.net/abcdef../)
• a link we use for mobile testing using the following syntax
  • https://fomantic-ui.com/jsfiddle/#!/{jsfiddle-code}
  • For example https://fomantic-ui.com/jsfiddle/#!/sfz45v0m/3 (using your jsfiddle above)

Because I would like @jamessampford to test this on his ipad/mouse setup .
I believe you already tested it so far on your Android/bt mouse setup (?)

I have to rely/trust on your experience here, because i can only use Browserstack to emulate a wider range of mobile devices but none of those have a real mouse attached to the devices, so the only situation i can personally test is if the changes basically still work on "usual" setups.

[jamessampford]

@lubber-de This seems to work (both dragging and clicking) on my iPad (iPadOS 15.4.1, latest version) using:

• just my finger
• with Apple Pencil
• using the trackpad on my keyboard (not the Magic Keyboard, not Bluetooth connected)

Also works on my Android phone still but I can only try with finger

It may be a good idea to test in Windows with a touchscreen in all browsers, as well as hoping that someone else has a trackpad keyboard and/or Bluetooth mouse to verify in iOS/iPadOS

As this also relates to #1989 with the dropdown module, the same improvement will also need to be implemented there (and anywhere else similar)

[mhthies]

I believe you already tested it so far on your Android/bt mouse setup (?)

Yes, I tested with desktop Chrome on Linux (touch + mouse), mobile Chrome on Android (touch + mouse) and mobile Firefox on Android (touch + mouse).

It may be a good idea to test in Windows with a touchscreen in all browsers, as well as hoping that someone else has a trackpad keyboard and/or Bluetooth mouse to verify in iOS/iPadOS

This is a good idea, although I'm hoping that all modern desktop browsers stick to the Touch API as it is described on MDN. Unfortunately, I don't have Windows touch device at hand.

As this also relates to #1989 with the dropdown module, the same improvement will also need to be implemented there (and anywhere else similar)

Yes, I'm already working on this one. Another PR will follow for this, as soon as I can fix some strange behaviour in touch interaction of nested dropdown menus (which is already present in the current code).

[mhthies]

Here is the updated JSFiddle:

• https://jsfiddle.net/jyg4wtcq/
• https://fomantic-ui.com/jsfiddle/#!/jyg4wtcq

[lubber-de]

@jamessampford could you please try/approve the new jsfiddle on your setup again ? Thx

[jamessampford]

@lubber-de Seems to still work the same with the same 3 different ways of testing it as before (with dragging and clicking/tapping) with both the sliders

[lubber-de]

LGTM! 👍🏼

[lubber-de]

@all-contributors please add @mhthies for code

[allcontributors]

@lubber-de

I've put up a pull request to add @mhthies! 🎉