search

mui / base-ui

Base UI is an open-source library of accessible, unstyled UI components for React.
https://mui.com/base-ui/
MIT License
242 stars 43 forks source link

[Slider] `track="inverted"` does not work #48

Open Fireclunge opened 1 year ago

Fireclunge commented 1 year ago

Duplicates

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

Hi, Can I work on this issue? :)

mj12albert commented 4 months ago

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 https://github.com/mui/base-ui/pull/373