[Slider][base][material][joy] Fix not draggable on the edge when disableSwap={true}

[sai6855]

Fixes #35971

preview: https://deploy-preview-35998--material-ui.netlify.app/material-ui/react-slider/#minimum-distance

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 0bfb2eb

[ZeeshanTamboli]

For more context, see #25547

[sai6855]

For more context, see #25547

got it, i'll fix it. according to this comment values should not be displayed on hover and that is missing in this PR #25547 (review).

[sai6855]

I'm kind of stuck here, According to this comment (#25547 (review)) When disableSwap is true, thumbs shouldn't show the value on hover, pointer-events: none is used to achieve this behavior, but pointer-events: none is making slider thumb undruggable when the thumb is at the edge.

I tried to make the thumb draggable and hide values on hover but couldn't do it without making significant changes. I guess only one of the behavior is achievable here.

[ZeeshanTamboli]

@oliviertassinari Do you have any context to share on this?

[oliviertassinari]

I would go one step beyond:

diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 262741a6eb..9a06641a65 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -765,7 +765,8 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) {
                 })}
                 style={{
                   ...style,
-                  pointerEvents: disableSwap && active !== index ? 'none' : undefined,
+                  // So the non active thumb doesn't show its label on hover.
+                  pointerEvents: active !== -1 && active !== index ? 'none' : undefined,
                   ...thumbProps.style,
                 }}
               >

I think that the current UX is broken, how does it make sense to see the label here?

Screen.Recording.2023-02-05.at.19.54.01.mov

https://mui.com/material-ui/react-slider/#range-slider

[oliviertassinari]

Why is this logic not inside getThumbProps() of useSlider? It seems that we have to fix 3 different places at the same time.

[sai6855]

moved logic to getThumbProps but couldn't correctly type thumbProps hence had to use @ts-ignore.

https://github.com/mui/material-ui/pull/35998/files#diff-10ce33fc17ee7c4c1c1ec9123c97682153eef706ec3eaf1162827687bae42869R285

[mnajdova]

Why was this change not done in getThumbProps as pointed out by Olivier? We anyway provide there a style object that needs to be spreaded. Should we extend the getThumbProps to receive additional state other then event handlers? cc @michaldudak for thoughts.

[ZeeshanTamboli]

Why was this change not done in getThumbProps as pointed out by Olivier? We anyway provide there a style object that needs to be spreaded. Should we extend the getThumbProps to receive additional state other then event handlers?

It was done in 2e8d009, but it didn't look correct with style being callable. So I suggested a way in #35998 (comment) to access the index in hook, but thought it won't be worth it because of the computation involved.

[mnajdova]

It was done in 2e8d009, but it didn't look correct with style being callable. So I suggested a way in #35998 (comment) to access the index in hook, but thought it won't be worth it because of the computation involved.

I now it was done, this is why I mentioned it again. We can provide an additional function in the useSlider hook either as a direct prop, or as part of the result of getThumbProps for calculating the thumb's style prop. cc @michaldudak for recommending which one would be preferred.

[CatchGus]

What is the status of this PR? Can it be merged?

Currently manually overwriting styles to get this to work.

const CustomSlider = styled(Slider)({
  "& .MuiSlider-thumb": {
    pointerEvents: "auto!important",
  },
});

[siriwatknp]

put on hold here to wait for @mnajdova question.

[michaldudak]

@mnajdova @sai6855 From the point of view of the useSlider hook, the most elegant to me would be to have getThumbProps(index). But this would not play nicely with useSlotProps and require custom implementation in all the styled libraries.
That's why having a getThumbStyle(index) function returned by useSlider seems to be a better option.

[sai6855]

@michaldudak added getThumbStyle in the return value of useSlider hook

[ZeeshanTamboli]

Looks good!