Author: | argyleink |
---|---|
Views Total: | 156 views |
Official Page: | Go to website |
Last Update: | January 4, 2024 |
License: | MIT |
Preview:

Description:
A minimal and fast before/after image comparison slider built with range input and a bit of JavaScript.
How to use it:
1. Add a range input together with before/after images to the image comparison UI.
<div class="compare"> <section class="before"> <img src="1.png" alt="" /> </section> <section class="after"> <img src="2.png" alt="" /> </section> <input type="range" id="range" step="0.1"> </div>
2. The necessary CSS rules for the image comparison slider.
.compare { display: grid; > * { grid-area: 1 / 1; } > section { display: grid; place-content: center; } .before { -webkit-mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0); mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0); } .after { -webkit-mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0); mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0); } > input[type="range"] { z-index: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: 4px; block-size: 100dvh; background-color: CanvasText; } &::-moz-range-thumb { -moz-appearance: none; appearance: none; inline-size: 4px; block-size: 100dvh; background-color: CanvasText; } } } img { max-block-size: 80dvh; max-inline-size: 100%; }
3. Enable the range input to compare the difference between before/after images.
range.oninput = () => document.body.style.setProperty('--pos', range.value + '%')