[Slider] Update style to match the specification #22782

joshwooding · 2020-09-27T19:26:53Z

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

Closes #20153

Breaking Change

ValueLabel class circle changed to container

joshwooding · 2020-09-27T19:27:50Z

packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js

@@ -634,7 +634,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
      <input value={values.join(',')} name={name} type="hidden" />
      {marks.map((mark, index) => {
        const percent = valueToPercent(mark.value, min, max);
-        const style = axisProps[axis].offset(percent);
+        const style = axisProps[axis].offset(clamp(percent, 0.5, 99));


prevents marks being displayed outside the track

joshwooding · 2020-09-27T19:29:42Z

packages/material-ui-lab/src/SliderStyled/SliderStyled.js

@@ -198,14 +192,20 @@ const SliderRoot = muiStyled(
  },
  '& .MuiSlider-valueLabel': {
    // IE 11 centering bug, to remove from the customization demos once no longer supported


We should still re-visit the centring styling once we drop IE 11

mui-pr-bot · 2020-09-27T19:39:53Z

@material-ui/lab: parsed: +0.22% , gzip: +0.18%

Details of bundle changes

Generated by 🚫 dangerJS against e041e1c

oliviertassinari

We're missing a box-shadow on the thumb.

On a related note, I recall a discussion with @mbrookes about the classes API: "Slider track and rail means the same thing". My imagination fails to find something better.

eps1lon · 2020-10-07T08:56:20Z

packages/material-ui-lab/src/SliderUnstyled/ValueLabelUnstyled.js

@@ -39,8 +40,9 @@ function ValueLabel(props) {
      className: clsx(children.props.className),
    },
    <Root className={clsx(classes.offset, className)} theme={theme}>
-      <span className={classes.circle}>
+      <span className={classes.container}>


It seems like we removed and added classes but I see no documentation changed. Is this not something that is auto-generated or available in types?

/cc @mnajdova

These classes are not the props classes:

const classes = useValueLabelClasses(props);

So there are no classnames that can target the ValueLabel component?

oliviertassinari

I have noticed the following issues:

Inversed color issue

It's the 3rd regression from moving from the withStyles to styled API (emotion, not MD spec update related). I think that we didn't catch it in Argos because we introduced a new component, we didn't replace the existing one.

No more box shadow when dragging

Vertical alignment issue, especially noticeable on a touch device

On a related note, I wonder about the dense mode. What are your thoughts on providing a dense variant of the slider? The new design looks great on mobile. But on desktop? 20px, that's bold for the thumb! When Ant design is 14px, the previous spec was 12px, native slider on Chrome is 16px.

Examples of slider on Sketch and Figma:

joshwooding · 2020-10-10T01:14:32Z

I have noticed the following issues:

Inversed color issue

It's the 3rd regression from moving from the withStyles to styled API (emotion, not MD spec update related). I think that we didn't catch it in Argos because we introduced a new component, we didn't replace the existing one.

~~Inverted looks fine to me?~~ It's broken in production only - locally it's fine. After rebasing on next it has seemed to fix itself.

No more box shadow when dragging

Box shadow on the thumb is used to provide the ripple, this will require a change there.

Vertical alignment issue, especially noticeable on a touch device

~~I'll look into it.~~ This seems like a bug in how HD screens are handled via the browser. Everything seems to be 1 pixel (0.5px) off.

mbrookes · 2020-10-10T10:58:45Z

https://github.com/mui-org/material-ui-pickers/issues/2136#issuecomment-706066008

Could we apply the same logic here? I'm not convinced that all of the changes to the slider in the current spec are an improvement.

oliviertassinari · 2020-10-10T11:17:55Z

@mbrookes Google has started to use the new design. Happy to wait for Android 12 too.

Is this statement accurate? In the early days, Material Design guidelines were release after they deployed the design. It seems to be increasing going in the other direction.

I'm personally more in favor of implementing the design spec after it gains mass adoption in Google's product. This has the following advantages:

Production is production, the environment provides the strongest constraints. You won't see all the fail attempts.
The more used a UI/UX is, the more past learnings it creates in end-users. Making the app look more intuitive and look nicer.

On a related note, this makes me think of a discussion with the Material Design team. I recall they tried to create a distinction between "Google Material Design theme" and the "default Material Design theme". They encouraged us to follow the "default Material Design theme", but shouldn't we aim for "Google Material Design theme"?

oliviertassinari · 2020-11-13T15:57:49Z

The poll on Twitter seems to suggest that we can move forward. However, I would raise the need for a dense mode. I think that it's important for work tools. For instance, I was just checking a design tool's slider.

oliviertassinari · 2021-01-23T18:11:11Z

I'm closing as the effort has been stale for some time, thanks for the exploration.

joshwooding added design: material This is about Material Design, please involve a visual or UX designer in the process component: slider This is the name of the generic UI component, not the React module! labels Sep 27, 2020

joshwooding commented Sep 27, 2020

View reviewed changes

mbrookes mentioned this pull request Sep 27, 2020

[RFC] Material-UI v5 🚀 #20012

Closed

joshwooding force-pushed the update-slider-styles branch from 2891e99 to ffd57d6 Compare October 2, 2020 22:52

github-actions bot mentioned this pull request Oct 2, 2020

Update snapshots for pr/22782 eps1lon/mui-scripts-incubator#1041

Closed

joshwooding closed this Oct 2, 2020

joshwooding reopened this Oct 2, 2020

oliviertassinari reviewed Oct 3, 2020

View reviewed changes

joshwooding added the breaking change label Oct 4, 2020

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 5, 2020

eps1lon reviewed Oct 7, 2020

View reviewed changes

oliviertassinari requested changes Oct 7, 2020

View reviewed changes

joshwooding added 6 commits October 10, 2020 01:33

update slider

eb4edd2

update label

de35727

remove comment

fb1269d

prettier

df0a8fc

Increase mark label spacing

e5cca35

Add box shadow

2c4ba3e

joshwooding force-pushed the update-slider-styles branch from c074eec to 2c4ba3e Compare October 10, 2020 00:34

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 10, 2020

try using ::before for ripple

e041e1c

This comment has been minimized.

Sign in to view

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 11, 2020

oliviertassinari mentioned this pull request Oct 14, 2020

[docs] Fix vertical alignment of Slider demo #23059

Merged

1 task

oliviertassinari added the on hold There is a blocker, we need to wait label Oct 17, 2020

oliviertassinari removed the on hold There is a blocker, we need to wait label Nov 13, 2020

oliviertassinari closed this Jan 23, 2021

oliviertassinari mentioned this pull request Jun 7, 2021

[Slider] Adjust css to match the specification #26632

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Slider] Update style to match the specification #22782

[Slider] Update style to match the specification #22782

joshwooding commented Sep 27, 2020 •

edited by oliviertassinari

Loading

joshwooding Sep 27, 2020

joshwooding Sep 27, 2020

mui-pr-bot commented Sep 27, 2020 •

edited

Loading

oliviertassinari left a comment •

edited by mbrookes

Loading

eps1lon Oct 7, 2020

mnajdova Oct 8, 2020

eps1lon Oct 8, 2020 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

joshwooding commented Oct 10, 2020 •

edited

Loading

mbrookes commented Oct 10, 2020

oliviertassinari commented Oct 10, 2020 •

edited

Loading

This comment has been minimized.

oliviertassinari commented Nov 13, 2020

oliviertassinari commented Jan 23, 2021

[Slider] Update style to match the specification #22782

[Slider] Update style to match the specification #22782

Conversation

joshwooding commented Sep 27, 2020 • edited by oliviertassinari Loading

Breaking Change

joshwooding Sep 27, 2020

Choose a reason for hiding this comment

joshwooding Sep 27, 2020

Choose a reason for hiding this comment

mui-pr-bot commented Sep 27, 2020 • edited Loading

oliviertassinari left a comment • edited by mbrookes Loading

Choose a reason for hiding this comment

eps1lon Oct 7, 2020

Choose a reason for hiding this comment

mnajdova Oct 8, 2020

Choose a reason for hiding this comment

eps1lon Oct 8, 2020 • edited Loading

Choose a reason for hiding this comment

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

joshwooding commented Oct 10, 2020 • edited Loading

mbrookes commented Oct 10, 2020

oliviertassinari commented Oct 10, 2020 • edited Loading

This comment has been minimized.

oliviertassinari commented Nov 13, 2020

oliviertassinari commented Jan 23, 2021

joshwooding commented Sep 27, 2020 •

edited by oliviertassinari

Loading

mui-pr-bot commented Sep 27, 2020 •

edited

Loading

oliviertassinari left a comment •

edited by mbrookes

Loading

eps1lon Oct 8, 2020 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

joshwooding commented Oct 10, 2020 •

edited

Loading

oliviertassinari commented Oct 10, 2020 •

edited

Loading