Netlify deploy preview

https://deploy-preview-40332--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against f088a86

Nice idea 👍

On this demo:

https://deploy-preview-40332--material-ui.netlify.app/base-ui/react-slider/#value-label

I see 3 design bugs:

1. The slider thumb drag isn't centered
2. The whole thing zoom
3. The shadow around the thumb turns to opacity: 1 after the mouse it released

It feels correct in https://deploy-preview-40332--material-ui.netlify.app/material-ui/react-slider/#continuous-sliders.

It does look better! How would you feel about adding a subtle transition on the outline size?

Another bug I can notice on the demo but not on the Material UI version. On mobile, the thumb outline size is bigger after mouse drag. It should only be be bigger during mouse drag.

@michaldudak, do you mean something different than transition-property: box-shadow, transform;?
@oliviertassinari, about the bug you mentioned, I'm sensing that has something to do with the focusVisible class?

I'd appreciate some help with both that bug + making the introduction demo customizations work! 😬

do you mean something different than transition-property: box-shadow, transform;?

I see code for it, but I don't see the actual transition running - the box shadow appears instantaneously.

I'm sensing that has something to do with the focusVisible class

I'd say it's unlikely - the focus-visible state isn't applied when dragging with a finger. I'll take a deeper look at it.

I see code for it, but I don't see the actual transition running - the box shadow appears instantaneously.

Maybe you're seeing just the intro demo (as mentioned in the PR's description, I'm having issues with it... 😬)? The others seem to be fine, though!

Little bump on this one, if y'all don't mind giving it a second look. 😃

Another bump on this one — would love a review here (and help in understanding why the intro demos are not changing 🤔)!

It seems the introduction demo's styles were not updated. Some demo files were not used in the docs - perhaps you changed one of them instead? I removed them as they aren't shown anywhere.
I also merged in the latest master.

To me personally it would feel better if the outline disappeared after I release the mouse button. It's important to have it when focusing by keyboard (so, focus-visible), but not necessarily otherwise (focus). What do you think?

Also, as Olivier mentioned, clicking on the thumb does not center it. But this issue is also present on master (although less visible as the thumb is smaller), so we can tackle it in a separate PR.

Yeah, agree with the box shadows disappearing as I release the thumb with the mouse! It's how it's working for me already, though 😬 how's this different from the video? No styles are explicitly defined for the focus state, just for focus-visible. (And on the video, I'm moving away from the cursor because otherwise, it triggers the hover styles, but the focus box shadow is out when doing so!)

Weird - this is what I see (on Edge/Windows and Safari/iPad):

@michaldudak wondering if you have any idea why that is 🤔 is this happening to you on the version we have in production?

An update here: that problem started to happen with me again, and it seems that switching from the .Mui-focusVisible class to the native focus-visible solves the problem. Do we still need the workaround there? With that fix, this PR may be ready to go — @michaldudak do you mind quickly double-checking?

It does work well with the mouse now, but the outline isn't shown when focused by a keyboard :/

Uhm... well, given it's a problem that's already present in the production version, maybe we can unblock this PR (so we get all the design/CSS improvements) and tackle the problem in a follow-up one? I'm a bit clueless about the solution, feeling like it's a deeper thing. Happy to solve it here if we have any strong pointers, though. It would be ideal for this PR to go out with everything tidied up.

Fair enough. Let's revert to .Mui-focusVisible, then. There might be a bug in the Slider itself, as I noted in #40652 (comment)

Would you mind opening two follow-up issues? One with the outline, and the other with the thumb not being centered on click.