feat: add `clip` prop

[nerdyman]

• [ ] Closes https://github.com/nerdyman/react-compare-slider/issues/136

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compare-slider	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 14, 2024 5:03pm

[zoltan-mihalyi]

Hi! Is this PR still in progress?

Are you planning to implement the three way switch? https://github.com/nerdyman/react-compare-slider/pull/137#issuecomment-2041400345

[nerdyman]

Apologies @zoltan-mihalyi! Yeah still planning on doing the three way switch. I'll take a look this weekend.

[nerdyman]

@zoltan-mihalyi This will need a major release since it changes the underlying markup. I also found a few issues with the current clip behaviour. ContainerClip uses absolute positioning which causes the slider lose its intrinsic sizing when both items are clipped which isn't ideal. I was looking at replacing the absolute positioning with overlapping grid items in the next release so I can do that as part of this PR.

If you need this feature ASAP I can publish a pre-release version for you to use? Just keep in mind there will be changes in the final v4 release.

[zoltan-mihalyi]

Thank you for informing! Is the problem that you described relevant in the three-way switch or in the version merged to next branch too?

Very kind of you, I have a workaround for now, but in the long therm it would be nice to use the upstream version.

[ty0x2333]

Is there any new progress? @nerdyman

[nerdyman]

@ty0x2333 Yeah I think I figured out the layout issues but I need to do more testing on it before doing a release. I'll aim to get a pre-release on npm this week.

@zoltan-mihalyi Sorry I missed your message, the position issue was just for the three way switch IIRC but that should be resolved with the latest updates 🙏

[pkg-pr-new[bot]]

Open in Stackblitz • react-compare-slider-example

pnpm add https://pkg.pr.new/nerdyman/react-compare-slider@143

commit: 7a6ba24

[github-actions[bot]]

Size Change: 0 B 🆕

Total Size: 0 B

_{compressed-size-action}

[nerdyman]

You can try out the preview release by running on the following:

pnpm add https://pkg.pr.new/nerdyman/react-compare-slider@143
yarn add https://pkg.pr.new/nerdyman/react-compare-slider@143
npm i https://pkg.pr.new/nerdyman/react-compare-slider@143

The slider also has better intrinsic sizing now, it doesn't automatically apply width: 100% anymore. It will adapt to the size of itemOne and itemTwo instead so you might need to adjust your styles if you were relying on that before.

[zoltan-mihalyi]

It looks nice, I can't wait for the release :)