[Slider] Don't ignore isRtl prop.

[Shayan-To]

Signed-off-by: Shayan Toqraee [email protected]

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

[mui-bot]

	Messages
:book:	Netlify deploy preview: https://deploy-preview-35071--material-ui.netlify.app/

Details of bundle changes

Generated by :no_entry_sign: dangerJS against c3e827b42f7ad3c3167982fce9e4349626e152a4

[Shayan-To]

@michaldudak Would you please comment on this PR? This is really annoying, as I want to have a strictly LTR slider in my app, and isRtl prop is completely ignored.

Is there anything I can do to speed things? (I didn't know what to do about the error in the failed CI.)

[michaldudak]

Is there an issue that describes the problem this PR solves? Besides, the PR is missing a test that verifies if it works well.

[Shayan-To]

No, there is no issue. I thought that ignoring a prop entirely is an obvious enough problem to be solved.

I don't know how I can write a test about this. I don't have a lot of time, but am willing to help move this forward. Could you please tell me what things I should do to?

[michaldudak]

The PR needs a description so that we know what it's about when we look at it in a couple of months. As for the test, you can create a slider with the isRtl prop set, set its value close to its range end, and verify if the thumb position is close to the right side.

[ChaseMarcum]

This PR seems stale, is there any progress on getting this resolved and through?

[michaldudak]

isRtl is an internal prop and shouldn't be used directly. The docs fail to mention this, and I'm going to update them so it's clear. All the components check the theme to determine the direction and Slider should not be an exception.

[Shayan-To]

@michaldudak Its value is never used anywhere. If it is an internal prop, then it is a very useless one.

Anyway, is there a way to change the direction of slider? I want to use a slider that works from left to right (like how we write numbers) instead of right to left.

[michaldudak]

It's used in SliderUnstyled, and our docs generation scripts incorrectly included it in the Slider docs. It's corrected now.

The Slider, like many other components, can be configured to use the RTL mode with a theme setting:

const theme = createTheme({
  direction: 'rtl',
});

return (
  <ThemeProvider theme={theme}>
    <Slider ... />
  </ThemeProvider>
);