Support passing in direction to useSlider for media controls

[ewlsh]

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 (
  <I18nProvider locale={direction === 'rtl' ? 'en-US' : locale}>
     <Slider ... />
  </I18nProvider>
);

...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 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

[snowystinger]

I see that Spotify agrees with this as well https://engineering.atspotify.com/2019/4/right-to-left-the-mirror-world
and Firefox https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html

I'm not sure that we want to expose this as "direction" though, maybe it should just be a isMirroredRTL boolean or something, then you wouldn't need to check the locale and direction yourself to control the direction. We would just behave the correct way in an RTL locale.

[devongovett]

We could also consider supporting a direction prop on I18nProvider as an override to the default determined from the locale. That would make it work for other components that are direction aware too.

[snowystinger]

From reading all those articles, not every direction aware component should be affected though, normally sliders would be mirrored, but the Media Player slider appears to be different? Or would the expectation just be that people would wrap targeted components in that override?

[ewlsh]

We could also consider supporting a direction prop on I18nProvider as an override to the default determined from the locale. That would make it work for other components that are direction aware too.

Mixing "locale direction" with "component direction" might make this more confusing given the timestamps, etc. in a media player should still be formatted correctly.

maybe it should just be a isMirroredRTL boolean

I'd support that solution though it would require defaulting it to true. Given ltr is effectively the default here and there is no use case for supporting rtl sliders embedded in ltr layouts that I'm aware of maybe something like matchLocaleDirection where matchLocaleDirection={false} forces a slider to be ltr when orientation="horizontal"

<Slider orientation="horizontal" matchLocaleDirection={false} />
<Slider orientation="vertical" matchLocaleDirection />

useSlider({ matchLocaleDirection: false })
useSliderThumb({ matchLocaleDirection: false })

[snowystinger]

Yeah, naming will be a little funky, our boolean props always try to use a prefix of is | allows | has and they should have a default of false.

So agreed, isMirroredRTL isn't a great name, I was mostly trying to convey the idea. We can work on the name later.