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

[glyad]

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.

[bigopon]

@ben-girardet any thoughts on tackling this one?

[ben-girardet]

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 ?