[Slider] Adjust css to match the specification

[siriwatknp]

BREAKING CHANGE

• Rework the CSS to match the latest Material Design guidelines and make custom styles more intuitive. See documentation.

  

  You can reduce the density of the slider, closer to v4 with the size="small" prop.

---

Closes #20153
Preview: https://deploy-preview-26632--material-ui.netlify.app/components/slider/

• adjustment based on material design spec

• add size="small" and test

  

• add MusicPlayer demo light & dark mode (to test customisation)

  

I use this opportunity to refactor the CSS approach due to these issues I experienced.

• height defined on all of the elements (root, rail, track) which means I need to change all of the places.
• change height(thickness) affect the position of thumb, as a result need to adjust thumb margin and track, rail radius.
• change height(thickness) affect mark to not aligned center.

Goal

to have these experiences when customizing the slider.

• change height(thickness) only at root and rail, track should scale
• border-radius of rail, track inherit from root, so developers only need to adjust border-radius at one place.
• change height(thickness) then thumb should still be centered
• change thumb's size(width, height) should make it still centered
• change label size should make it float on the thumb perfectly
• box-shadow of thumb use :before so that it is easier to remove and not conflict with existing box-shadow

Result

Default Slider

Customized Slider

const StyledSlider = styled(Slider)({
  color: 'red',
  height: 2,
});

const StyledSlider = styled(Slider)({
  color: 'orange',
  height: 8,
  '& .MuiSlider-thumb': {
    width: 16,
    height: 16,
  },
});

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

[mui-pr-bot]

Details of bundle changes (experimental)

@material-ui/core: parsed: +0.29% , gzip: +0.17%

Generated by 🚫 dangerJS against 33f34fa

[oliviertassinari]

@siriwatknp Do you have thoughts about this comment #22782 (comment), on the "size"/"density" aspect of the change?

[siriwatknp]

@oliviertassinari with the new approach that I made, dense is not hard to add. If I understand you correctly, this is what you expect right?

<Slider dense />

the rail, track (thickness) will be smaller from 8px to 4px (may be) and thumb from 20px to 12px (may be). I would say we can do this with small afford and not impact customisation. The question is "do we want to put it on top of the spec or not"? I assume that developers won't have objection about dense since it is an extra thing but let's see other team's opinion @mui-org/core

[oliviertassinari]

with the new approach that I made, dense is not hard to add. If I understand you correctly, this is what you expect right?

@siriwatknp I was wondering about something in this order. Something that would make it 1. easier for developers to migrate from v4 to v5, to the new design spec (especially when working on high-density dashboards) 2. allow to cover a wider range of use cases.

"do we want to put it on top of the spec or not"?

I think so. There are multiple precedents from us doing it.

<Slider dense />

For the API. If we envision use cases for different sizes through customizations, then an enum size prop would probably work better, otherwise dense.

---

Something seems broken with your screenshots in the PR's description, they are not at the right scale 😁 . I would expect:

not:

(on macOS GitHub automatically detect that my screenshot at 2:1 and resize them correctly, I don't know how it does that)

[mnajdova]

Changes look good to me. @oliviertassinari do we document changes like this as Breaking changes? We are for sure breaking any customization as the styles are different.

[siriwatknp]

Changes look good to me. @oliviertassinari do we document changes like this as Breaking changes? We are for sure breaking any customization as the styles are different.

Added to migration-v4.md in Slider section describing css rework.

[oliviertassinari]

How to do that? 😲

The only solution I know is to use macOS 😁. The docs don't help https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files.

---

Things I could notice: vertical alignment issue on this demo https://deploy-preview-26632--material-ui.netlify.app/components/slider/#continuous-sliders:

It's even easier to spot when in touch pointer mode:

---

Regarding the discussion on the density/size problem. @mnajdova Did you have any thoughts? I'm pinging @danilo-leal too.

[siriwatknp]

Things I could notice: vertical alignment issue on this demo

Fixed.

[siriwatknp]

Regarding the discussion on the density/size problem

2 ways I see,

1. merge with current change, consult Danilo and work on beta.
2. add size="small" in this PR to match v4 design, this could benefit people who want to keep the old design.

[oliviertassinari]

I would add a third option: #26632 (comment)

3. Add size="small" with the same design but a denser display, with the same or a bit less what the current size of the slider is in v4. Maybe it's actually the same as 2. 😁

[oliviertassinari]

Awesome 🔥

I have pushed two more polishes for the vertical slider

1. it feels too crowded here:

https://deploy-preview-26632--material-ui.netlify.app/components/slider/#vertical-sliders

2. I have fixed the transition on the vertical slider

[oliviertassinari]

I have rebased on HEAD to fix the prettier issue. We were a week behind. It's safer too.