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

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

Open glyad opened this issue 4 years ago • 2 comments

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

Jul 20 '20 09:07 glyad

@ben-girardet any thoughts on tackling this one?

Jul 21 '20 03:07 bigopon

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 ?

Jul 21 '20 07:07 ben-girardet