The ux-slider has incorrect appearance and behaviour then RTL (dir="rtl") is enabled

aurelia / ux

A user experience framework with higher-level capabilities, designed to bring simplicity and elegance to building cross-device, rich experiences.

MIT License

368 stars 55 forks source link

Open glyad opened 4 years ago

glyad commented 4 years ago

I'm submitting a bug report

Library Version: latest

Operating System: macOS 10.15.5 Catalina

Node Version: 10.19.0

NPM Version: 6.14.6

Webpack Latest

Browser: Chrome Latest

Language: TypeScript 3.9.5

Current appearance (buggy):

Desired appearance: With appropriate margin from right.

Current behaviour: The reaction to mouse events becomes "inverted" then the document has RTL direction.

Screen Recording 2020-07-20 at 12 38 59

bigopon commented 4 years ago

@ben-girardet any thoughts on tackling this one?

ben-girardet commented 4 years ago

Good question 👍🏻

Probably need to detect RTL with something like:

window.getComputedStyle(this.element, null).getPropertyValue('direction')

and if RTL invert the slider position.

However this assumes that RTL is defined in CSS which might not be the only way to do so. I think one can also use the dir HTML attribute...

Anybody familiar with RTL and how to properly "detect" it from JavaScript ?