# Image comparison slider in 6 lines of JavaScript

DevFeed: [Image comparison slider in 6 lines of JavaScript](<https://devfeed.tech/articles/image-comparison-slider-in-6-lines-of-javascript-37287.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/image-comparison-slider/>)

Author: Stanko

Published: 2025-03-02T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Code](<https://devfeed.tech/topics/code.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

A tutorial showing how to build an image comparison slider with two stacked images, a native HTML range input, JavaScript, and a CSS variable. The slider value controls the width of the top image and the separator position. The article also discusses browser support and accessibility considerations.

## Source excerpt

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. Toggle debug Try out the debug modeI'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. It's in the name # Image comparison slider. Slider, you say? We already have a native slider component - input [type=range]. Could we use it to make an image comparison slider? Turns out we can. I think that the solution I came up with is clever, yet simple to understand. This is the base idea: We have two images and the range slider, stacked on each other. The range input goes from 0 to 100. As the slider is moved, we update a CSS variable to match the slider value. We use this variable to set the width of the top image. Here is a simplified, unstyled example. Try moving the slider to see how it works. JavaScript # As we saw in the example above, everything is about keeping the slider value synced with the CSS variable. This variable controls the width of the top image and the position of the separator. Here is the JavaScript code that keeps the --slider-value variable in sync with the slider value: // Set element variables const compareSlider = document.querySelector('.comparison-slider'); const input = compareSlider.querySelector('.comparison-slider__input'); // Update the CSS variable on input change input.addEventListener('input', () => { compareSlider.style.setProperty('--slider-value', `${input.value}%`); }); // Update the CSS variable on load // to ensure the slider starts in sync with image's width. compareSlider.style.setProperty('--slider-value', `${inpu