[Slider] track="inverted" does not work

[Fireclunge]

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.

[Fireclunge]

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, here are some demos from #373

• inverted fill: https://deploy-preview-373--base-ui.netlify.app/experiments/slider-inverted-fill/
• marks, fill, inverted fill: https://deploy-preview-373--base-ui.netlify.app/experiments/slider-marks/