adobe / adobe/react-spectrum

Support passing in direction to useSlider for media controls

Open
#10,112 7 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.