Support passing in direction to useSlider for media controls
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
This is the same ask as #2315 but for a different reason. For sliders that are used for media (e.g. an audio progress bar) they will always be left-to-right (ltr). See "Media Players" in https://m3.material.io/foundations/layout/bidirectionality-rtl for a good explanation of this.
Right now in our application we're doing this:
```
const { locale, direction } = useLocale();
return (
);
```
...to hackily workaround the limitation highlighted in #2315
### 🤔 Expected Behavior?
Support indicating the direction of a slider independently from the current locale.
### 😯 Current Behavior
Currently the direction of the slider is tied to the current locale - but in right-to-left languages there are left-to-right sliders.
### 💁 Possible Solution
Ideally we could provide a `direction` prop which controls [`reverseX`](https://github.com/adobe/react-spectrum/blob/3547c08ac6273c1ad55019ac6ea6c35865972048/packages/react-aria/src/slider/useSlider.ts#L79) independently of `I18nProvider` so that we can avoid overriding the `locale` given that has other formatting implications:
```
const { ... } = useSlider(
{
direction: 'ltr',
},
state,
trackRef,
);
```
An alternative version of this could be a `reversed` property which defaults to `true` for `direction === 'rtl'`:
```
const { ... } = useSlider(
{
reversed: false,
},
state,
trackRef,
);
```
### 🔦 Context
See "Media Players" in https://m3.material.io/foundations/layout/bidirectionality-rtl for a good explanation of this.
### 💻 Examples
_No response_
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.