[Slider][material-next] Slider restructure and style improvements

[DiegoAndai]

• I have followed (at least) the PR section of the contributing guide.

Material Next Slider issue: #37527

Summary

This PR implements improvements that required a restructuring of the Slider Thumb and Value Label structure. The original PR introducing material-next's Slider is #37520

The improvements are:

Thumb restructure

Address this comment. Restructure the Thumb and value label to a simpler structure, like the one in Joy's Slider. This removes the need for a separate ValueLabel component and types file, so those were removed.

Thumb and value label overlap

Implement the overlap border specification from Material You.

To do so I introduced the useSliderElementsOverlap hook that handles the logic of detecting overlaps for thumbs and value labels.

Screen.Recording.2023-06-19.at.14.22.47.mov

[mui-bot]

Netlify deploy preview

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

@mui/material-next: parsed: +57.44% , gzip: +59.19%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 6ad5568

[mnajdova]

Overall it looks great! Left some comments for improvements.

[mnajdova]

if we accept an array, let's make the hook considering all elements in the array, it shouldn't be much change.

[DiegoAndai]

I agree! But rather than considering all elements, I modified it to only accept two at most. I think this makes more sense as the slider thumb and value label elements should be two at most as well.

[DiegoAndai]

Hey @mnajdova, thanks for the review! I addressed your comments and also I added the v6 components migration guide, that way we can begin documenting breaking changes alongside PRs, with this PR introducing the first.

[mnajdova]

Instead of page, can we please add readme file in the @mui/material-next package? Maybe with name migration.md next to readme. We can add info in the readme, that they should follow the migraiton.md guidelines.

[mnajdova]

The changes look good to me, I left one suggestion for the migration location, as we anyway don't want to add a page on the docs just yet. @DavidCnoops can you review the design-related changes?

[DavidCnoops]

Overall this looks really good to me! It's a great solution to a tricky UI problem.

I have one very tiny nitpick: when valueLabelDisplay is set to auto and the 2 thumbs/values are about to overlap, the underlying value very briefly pops up. Also, when sliding the upper thumb over the lower one (i.e. when they completely overlap) its value seems to briefly disappear. It's -extremely- subtle so definitely not a big or blocking issue, but a 100% perfect solution would be to keep the lower value constantly hidden and the upper value constantly visible.

slider.webm

[DiegoAndai]

Hey @DavidCnoops! thanks for reviewing 😊

What you reported was indeed a bug:

• The active thumb's z-index should be higher than the other thumb to avoid the inactive one triggering hover states when dragging the active one, this fixes the "about to overlap issue"
• The transform animation should be disabled for the value label when dragging the thumb, this fixes the "briefly disappear when overlapping" issue

Thanks for catching the issues 🚀

[mnajdova]

We have a demo of a Slider with three thumbs - http://localhost:3000/material-ui/react-slider/#removed-track, also as far as I remember we updated the Base UI Slider and useSlider to support more than two thumbs. I would propose making this scenario works too.

[DiegoAndai]

Hey @mnajdova thanks for the feedback, I included your changes in the last commit:

• Improve naming and code structure in the useSliderElementsOverlap.ts file
• Support more than 2 values for the overlap style
• Added debounce function to onThumbMoved callback to reduce unnecessary overlap calculation. I tested and a debounce of 50ms felt the best UX-wise while also reducing the calculations by a factor of 10.

[mnajdova]

Looks much better 👍 I would recommend for PRs that include fixes like this to share a codesandbox for easily verifying the fix. It would help a lot with the reviews :)