[Bug]: Fluent Slider is not honoring RTL direction

[puneet4236]

Component

Slider

Package version

3.0.0-beta.70

@microsoft/fast-element version

2.0.0

Environment

System:
    OS: Windows 11 10.0.22621
    CPU: (28) x64 Intel(R) Core(TM) i9-9940X CPU @ 3.30GHz
    Memory: 28.47 GB / 63.70 GB
Browsers:
    Edge: Chromium (131.0.2903.99), ChromiumDev (127.0.2610.3)
    Internet Explorer: 11.0.22621.3527

Current Behavior

Fluent slilder is rendered left to right even though browser language is RTL.

Expected Behavior

Fluent slider should be rendered from right to left.

Reproduction

https://stackblitz.com/edit/typescript-g4lxnlbp?file=index.html,index.ts

Steps to reproduce

1. Open Edge Browser and change the browser language to RTL. For ex - Arabic language
2. Open the reproduciton link of stackblitz
3. Slider is still rendered in left to right direction.

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[eljefe223]

@chrisdholt @puneet4236

1. Slider has an observable property direction this also need to be set in order for the slider to orient the correct direction.
2. The Slider also uses a linear gradient for the host background that sets the first portion of the slider progress to the blue color This updates based on docuemnt.dir

So, there is no bug here. It's a combination of setting document.dir and direction on the slider itseld.

[puneet4236]

@eljefe223 we tried setting up direction property as well but that doesn't seem to work. Please refer this - https://stackblitz.com/edit/typescript-g4lxnlbp?file=index.html,index.ts

Also why we need to listen document.dir changes ? This should be handled automatically by component itself.