[Slider] Make interaction easier, fix thumb overflow

[ValentinH]

Wider the clickable zone and make the whole bar receive the initial move.

This is especially useful on mobile as today's version is hard to use on touch-screen (12 px is too small). I've made the clickable zone 40px wide. Angular Material has it at 48px FYI.

Before:

After:

[ValentinH]

Hey @oliviertassinari, any update on this?

[mbrookes]

@ValentinH I haven't looked into it beyond the Argos-CI screenshots, but it looks like this is changing the positioning of the slider.

[ValentinH]

Indeed, I've made the touchable zone bigger so there is a bit more space around it.

Is it a no-go or is it fine to change its positioning for good reasons? If not, I could remove some margin so the position remains the same but the touchable area is bigger.

I'm using the slider quite often on mobile and it's really hard to interact with...

[mbrookes]

It isn’t a major issue - we can make breaking changes in the lab with impunity. I had just assumed that the touch area could be increased without affecting the slider positioning.

[ValentinH]

We need to decide what we want. I chose to keep an extra space so we can have a large touch area and still a bit of margin between elements (for the 2 vertical sliders of the demo for example).

However, I'm not sure what is the best. Let me know what you think. 🙂

[ValentinH]

Ping! 🙂

[mbrookes]

@ValentinH I think if we can maintain the current size while making the interaction area bigger, that might be the best tradeoff.

There's something up with the interaction though - if you click and move the pointer away, the slider jumps to the clicked position. Previously, the slider didn't move.

Either way, looking at the spec, I'm wondering if it should slide the the clicked position as soon as it's clicked?

Also, it's possible to get the pointer "attached" to the thumb, even after the button is released by clicking on the thumb and and moving the pointer away.

[ValentinH]

Ok for the size, I'll update.

I added the ability to start dragging the thumb directly by clicking anywhere on the slider. It's much easier to interact with it like this. Most sliders work like this.

I didn't notice the bug you describe in your last sentence, I'll investigate :)

[ValentinH]

I have updated to size to be similar to before. However, when 2 sliders are displayed side by side, there is a bigger spacing because I replaced margin by padding and padding doesn't merge.
However, I continue to think we should make the touch area bigger so it's easier to use on mobile. With this change, it's better, but it could be even simpler with a bigger touchable zone.

Angular Material Slider touchable is much bigger for instance (48px tall):

I have also added a e.preventDefault() for mousedown and touchstart to prevent to bug you were mentioning.

[mbrookes]

@ValentinH I've iterated on your PR to solve a related issue, wherein the thumb would overflow the Slider bounding box. I'd appreciate your feedback!

@epodivilov I noticed some of the tests had fallen out of sync with the implementation (we don't currently run the lab tests with CI so it got missed). I've updated most of them. Would you mind taking a look and sanity checking them? Also, the onDragEnd test is failing, but I couldn't immediately see why. Any idea?

[ValentinH]

@mbrookes looks perfect to me! 👍

[mbrookes]

@ValentinH Thanks for working on this. 👍

@epodivilov If you get a chance to look at that test at some point that's be great!

[epodivilov]

@mbrookes I apologize for the long wait =)

I looked at the tests. Everything looks great. I did not have any problems with testing onDragEnd. Did you solve the problem or did it self-destruct?

[mbrookes]

@epodivilov that's weird, now I'm getting 'should have called the handleDragStart cb', but I didn't change anything to affect those tests 😕

Just to confirm, did you cd packages/material-ui-lab before running the tests?

[epodivilov]

@mbrookes Yes, after cd packages/material-ui-lab I also have same error. Ok, I will try to fix this problem.

[mbrookes]

@epodivilov Wonderful, thank you!