react-compare-slider: 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: Screenshot 2021-05-27 at 17 52 26

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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (8 by maintainers)

Commits related to this issue

fix: ensure bounds are synced on mount before earlying out, resolves #37 — committed to nerdyman/react-compare-slider by nerdyman 3 years ago
fix: add check to determine if bounds have been synchronised on mount, resolves #37 — committed to nerdyman/react-compare-slider by nerdyman 3 years ago
fix: add check to determine if bounds have been synchronised on mount, resolves #37 — committed to nerdyman/react-compare-slider by nerdyman 3 years ago

Most upvoted comments

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! 👍🏻

serban-mihai on Jul 28, 2021

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.

nerdyman on Jul 27, 2021

I tested the updated version and it seemed fine to me. Can give it a retest when back at work on Thursday.

moloko on Jul 27, 2021

@moloko I dug into this a bit at the weekend and think it’s happening because it needs to call updateInternalPosition at least once when it mounts but the bounds check cause it to exit out on the first call.

I’ll open an MR soon to fix it 😃

nerdyman on Jun 7, 2021

I think it’s 1920 x 1080.

Nope, is actually 1680 x 1050

moloko on May 28, 2021

Do you know which resolution it breaks at?

Most of them TBH! It was just one time I had my browser window maximised when I ran it that I noticed position: 100 was working fine, am away from my main computer right now but I think it’s 1920 x 1080. Note that it’s only ever on load that it breaks, when you resize the browser it corrects itself/just works.

moloko on May 27, 2021