Handle position when used in RTL content is way off (landscape only)

[moloko]

In landscape mode, something goes very wrong with the handle display when this is used in a web page (or element) that has dir="rtl" set on on it... it seems to be displaying on the far right of the .handle-container div.

I've set up a demo here: https://codesandbox.io/s/react-compare-slider-simple-example-forked-u6wlmp

From what I can see if you remove position:absolute from the div that's the immediate child of it, that fixes it:

[moloko]

I'm not sure whether when being used in 'RTL mode' a user would expect the handle to slide in the opposite direction... but that's a whole other question!

[nerdyman]

Hey Matt, that's crazy bug! I'll see if I can figure out why it's happening.

The position: absolute is needed on the inner child to ensure the handle only uses up its intrinsic width so interactive elements like Google maps can be used without being obstructued by the handle. The inner child element has been removed in v3 though so it might be solved when that gets published this happens in v3 too. I'll take a look for a fix with v2 too since v3 probably won't be released until early next year.

Good question on whether a RTL user would expect the slide direction to be reversed. I'd assume they'd still want it to slide as it does in LTR mode but not sure. Also not sure if the arrows should be reversed within the slider button.

If you're not using interactive content in the slider you could force the styles for now:

https://codesandbox.io/s/react-compare-slider-simple-example-forked-7ylclj?file=/src/styles.css

html[dir="rtl"] [data-rcs="handle-container"] > div {
  position: static !important;
}

[nerdyman]

This happens on v3 too. As a workaround there's the CSS hack above, or you could adddir="ltr" on the slider component itself.

I've updated the demo to toggle the dir prop https://codesandbox.io/s/react-compare-slider-simple-example-forked-7ylclj?file=/src/App.jsx:545-579

I hadn't considered how RTL affects things so think it needs more thought in general. Maybe the rendering of itemOne and itemTwo should be reversed too?

[moloko]

or you could adddir="ltr" on the slider component itself.

Of course! Why didn't I think of that... 🤦‍♂️

[moloko]

I hadn't considered how RTL affects things so think it needs more thought in general. Maybe the rendering of itemOne and itemTwo should be reversed too?

I honestly don't know for sure, I've not seen anything like this component done for RTL before!

But, as I understand it, the general rule for bidirectional content is that everything should be 'mirrored' bar a few exceptions like media playback controls and the playback progress indicator (as apparently these refer to the direction of 'the video tape' not of time)... so given that I'd say it seems like that you would reverse the rendering and handle drag initial position/drag direction in landscape mode.

[nerdyman]

This has been fixed in v3!

npm install react-compare-slider@latest
yarn add react-compare-slider@latest
pnpm install react-compare-slider@latest