davatron5000 / awesome-standalones

A curated list of awesome framework-agnostic standalone web components
1.31k stars 46 forks source link

Add `image-compare` web component #19

Closed Paul-Hebert closed 2 months ago

Paul-Hebert commented 3 years ago

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!