awesome-standalones icon indicating copy to clipboard operation
awesome-standalones copied to clipboard

Add `image-compare` web component

Open Paul-Hebert opened this issue 2 years ago • 0 comments

Hey @davatron5000 , I recently made the image-compare web component for a blog post my boss wrote.

I really like this repo and often use it when looking for a component to solve a common problem. I thought the image-compare component might be a good addition.

It's a standalone vanilla web component with zero dependencies that clocks in at 1.5kb minified and gzipped. It's similar to two-up but I couldn't figure out how to control two-up using keyboard controls so I made image-compare. It uses an input type="range" under the hood to make it easy to control via keyboard, screen reader, etc.

I noticed most of the components here link to a GitHub repo. I had made a docs page on Netlify for image-compare so used that as the link. Let me know if you'd prefer to link to the GitHub repo or would like me to make any other changes to this PR.

Let me know what you think! No hard feelings if this isn't a good fit for this list 🙂

Thanks!

Paul-Hebert avatar Jun 30 '21 19:06 Paul-Hebert