Image comparison slider in 6 lines of JavaScript
Image comparison component leveraging native HTML range input and a few lines of JavaScript.
Image comparison slider in 6 lines of JavaScript launched on March 2, 2025 with 28 votes, #678 of 7,215 launches that month and more than 90% of that year's launches. The site was still online in September 2026, 1 year on.
In plain words
This is a lightweight JavaScript tool that creates an image comparison slider in just six lines of code. It lets users interactively view the differences between two images by dragging a slider across them. The tool is designed for developers and web designers who need a simple, minimal solution for before-and-after image comparisons without complex dependencies. It prioritizes ease of implementation and small file size.
written from the facts on this page · September 2026
From the sources
While I was writing this post , I wanted to create an image comparison component. I made one with just a few lines of JavaScript, but I didn't include it in the post. Here is the finished slider, with images from the book Letters from Sarajevo . If you want to play with the code, you can find it on CodePen . Try out the debug mode I'm quite proud of it! The shadow effect is my favorite detail. . It reveals the structure in 3D and might give you a clue as to how I managed to create the slider with only a few lines of JavaScript. Here's a tip - the blue element is actually a native HTML range input. Image comparison slider . Slider, you say? We already have a native slider component - input…from muffinman.io
Does a similar job
all alternatives →- ICImage Comparison Slider – Plain JS2016 · jacted.github.io · ▲7
Canvas engines performance comparison – PixiJS, Two.js, and Paper.js2020 · benchmarks.slaylines.io · ▲193Render multiple moving rectangles to compare a number of canvas engines.
Accordion Slider2023 · accordionslider.com · ▲104Create fully responsive, css-only accordion sliders
Image Slider Generator2023 · imageslidergenerator.shahmirfaisal.com · ▲84Quickly create and customize image sliders for your website
More life & fun this month
the category →
A free city-building game in your browser. You are the mayor. You know what the city needs. Now get it past the zoning board, the neighbors, the appeals court and the next election.
Life & fun · 2d ago · permit.petercai.com
- IV
Life & fun · 14d ago · tanzaniaeducationproject.org
Turn a phone, tablet or TV into a sign. Type a message and it fills the screen: welcome signs, timers, Wi-Fi passwords and more. No app, no account, free.
Life & fun · 15d ago · bigwords.page
Play a free virtual guitar online with your keyboard or by touch. Slow songs down and see every chord, string and strum. Acoustic, classic, electric and bass.
Life & fun · 9d ago · guitoro.com
Carrier settings from iPhone, Pixel and Galaxy firmware, decoded and compared: APNs, VoLTE, 5G and Wi-Fi Calling per carrier, and what each build changed.
Life & fun · 13d ago · carrierexplode.com
Life & fun · 23d ago · space.bl2.net
Source: Show HN post ↗
Launched alongside, March 2025
the whole month →
Mimic Human Research & Save Findings in AI Knowledge Base
AI · 2025 · sider.ai
