bug when position is initially set to either 0 or 100

I can replicate both these issues using the example in this GH repo.

If you initially set position to 100, the handle is placed on the exact opposite side to what you’d expect.

Whereas if you set position to 0 the handle is in the correct position but itemOne is being displayed when it should be hidden.

Here’s a screenshot of it set up with 100:

In the example, it seems to be slightly specific to the size of the browser viewport i.e. if I have my browser maximised it works fine for position: 100 but still has an issue with position: 0.

I did a bit of debugging and the problem seems to lie around here: https://github.com/nerdyman/react-compare-slider/blob/f552b1f536c742269c8d92b20d2ddcc7ac92a451/src/ReactCompareSlider.tsx#L184-L198

Specifically that on some occasions it’s returning on L197 when, under normal circumstances (e.g. position being set to 99) it would not.

One workaround I’ve found is to set the initial position as a String rather than a Number

[serban-mihai]

Update: @nerdyman Your tip about the transition by framer was correct, since the scale up animation the transition property was conflicting with the slider cursor, wouldn’t get that without your tip 🚀

I removed the wrapping element that was fading in the component and now the cursor is placed according to it’s property value. Looks like if there is a wrapping element to the <ReactCompareSlider /> with style="opacity: 1; transform: none;"it’s going to break the initial cursor position as showed in my previous comment.

That style is appended to the wrapper by Framer Motion’s animation:

const scaleUp = {
  visible: { opacity: 1, scale: 1, transition: { duration: 0.3 } },
  hidden: { opacity: 0, scale: 0, transition: { duration: 0.3 } },
};

But I cannot figure out how to bypass it to have the fade in along the correct cursor positioning so I’ll leave it as it is for now.

Thanks again for the tip, this module is awesome! 👍🏻

[nerdyman]

Is the zoom in effect being handled by framer? It could be that the width or height at the point it mounts is zero.

I’m happy to dig into this more but could you open a discussion for your usecase specifically? I don’t think it’s related to the changes in this issue.