[@mantine/core] fix slider drag and hover behavior

[jvdsande]

Fix some Slider behavior:

• Remove unneeded stopPropagation on mouseDownCapture on the thumb, making it buggy in Preact
• Fix marks label behavior: now you can only click on them to set the value, but they do not trigger hover effect or drag
• Fix area in which drag and hover effect detection is active, to include the whole root without the marks label, by introducing a secondary level container "trackContainer" handling the events

[rtivital]

@jvdsande focus styles are incorrect, focus ring should appear only when user navigates with keyboard. In storybook it appears when slider is dragged. It works correctly only after mark was clicked (not sure why).

2023-04-06.13.43.51.mov

[jvdsande]

Hm, I missed that while testing. I'll look into it today!

[jvdsande]

@rtivital I've found the issue and fixed it

[rtivital]

Thanks!

[rtivital]

@jvdsande after this PR, slider does not respect container width, can you send a PR with a fix?

You can compare it with v5:

• v5 – https://v5.mantine.dev/core/flex/ (OK)
• v6 – https://mantine.dev/core/flex/ (Bad)

[jvdsande]

I'll look into it tonight, but as far as I know it was already like that in other V6, I'll see what I can do

[rtivital]

I've reverted this PR commit in a separate branch and the issue is gone – https://github.com/mantinedev/mantine/tree/revert-8bee2e5
So the regression was introduced in this PR.

I've already migrated slider in v7 and faced the same issue. I wasn't able to make mark clicks work the same way as they work now while keeping click behavior, so not really sure if that is possible. I've just disabled pointer-events on marks to remove confusing behavior.

[jvdsande]

I actually remember adding a weird negative margin to fix this the other way around. I think it might have fixed it in storybook specifically and broke it everywhere else. When I'm home I'll find the proper way to fix this in all situation