[Slider] track="inverted" does not work

[aimz-yeah]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/practical-knuth-qgjfw9?file=/Demo.js

Steps:

1. add track="inverted" to

Current behavior 😯

track="inverted" does nothing. It is the same behavior as the default "normal"

Expected behavior 🤔

The slidebar track should come in from the right as opposed to the left

Context 🔦

I'm trying to get the track to come in from the right

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[aimz-yeah]

Temporary workaround of mine for anyone curious (i'm using the vertical variant here)

const [valuePercentage, setValuePercentage] = React.useState<number>(50);

<Slider
  ...
  slotProps={{
    track: {
      className: "...",
      style: { height: `${100 - valuePercentage}%`, top: `0` },
    },
  }}
/>

[ZeeshanTamboli]

@Fireclunge Thank you for reporting this bug. Currently, when the track is inverted, the marksActive class is correctly applied to the marks from the last step, but the trackInverted class, which can be used for styling, is not applied to the inverted track. We should also provide documentation on how to address this.

In the meantime, you can use the workaround demonstrated in the CodeSandbox example: https://codesandbox.io/s/green-grass-dv5q33?file=/Demo.js. This workaround applies the background-color to the track based on the track prop value ( checking track === 'inverted' in styled) and adjusts the background-color of the rail.

[olibo733]

Hi, Can I work on this issue? :)

[mj12albert]

In the new API, the current Track component that represents the "fill bar" of the slider will be deprecated. The name "Track" (<Slider.Track />) will be used to refer to the full width of the slider, or the full "touchable" area to be more precise.

The marks prop and Mark/MarkLabel components will also be dropped.

For now, the new API will provide a useSliderContext hook that can be used to implement these (sub)components

[mj12albert]

UPDATE: Hooks and contexts will not be in the public API (at least for now)

Expected behavior
The slidebar track should come in from the right as opposed to the left

To achieve this, either make the slider RTL, or style the track and indicator to make it appear "inverted"

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Fireclunge How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.