Image Comparison Slider in CSS Only (without using JavaScript)

Image Comparison Slider in CSS without using JavaScript

In Previous tutorial I made the 'Image Comparison Slider' with one line of JavaScript code. Here we are going to do without using JavaScript.

Lets create input range slider and two divs below it with class names '.front', '.back' inside parent div with class name ''.img-before-after''.

Assign inline CSS variable to input range style="--timeline:--_slider"

<div class="img-before-after">
  <input type="range" class="range" style="--timeline:--_slider" value="50">
  <div class="front"></div>
  <div class="back"></div>
</div>

Lets create CSS. First lets create CSS custom @property --_slider with syntax: number, inherits: true, and initial-value: 0

@property --_slider {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

Lets declare global variables.

:root {
    --min-size: 0%; // min size when the slider is 0 (to left)
    --max-size: 100%; // max size when the slider is 100% (to right)
}

Tricky part: Lets append the slider value to width of .front div dynamically using CSS variables(--min-size and --max-size values with --_slider). Also assign Property variable name --_slider to timeline-scope, and animation-name and animation-timeline and create @keyframe

:root {
    --min-size: 0%;
    --max-size: 100%;
    --width: calc(var(--max-size)*var(--_slider) + var(--min-size)*(1 - var(--_slider)));
    animation: linear;
    animation-name: --_slider;
    timeline-scope: --_slider;
    animation-timeline: --_slider;
}

@keyframes --_slider {
    0% {
        --_slider: 1;
    }
}

Create CSS for elements img-before-after, input-range, input-slider-thumb.

body {
    background: #d6d6d6;
}

.img-before-after {
    position: relative;
    width: 900px;
    height: 600px;
}

input[type="range"] {
    background: transparent;
    width: 100%;
    height: 100%;
    margin: 0;
    outline: none;
    position: absolute;
    z-index: 2;
    -webkit-appearance: none;
    overflow: hidden;
}

input[type="range"]::-webkit-slider-thumb {
    width: 10px;
    height: 600px;
    cursor: pointer;
    -webkit-appearance: none;
    background: black;
    view-timeline: var(--timeline) inline;
}

input[type="range"]::-moz-range-thumb {
    view-timeline: var(--timeline) inline;
}

Lets add background image for both .front and .back divs. Lets assign width property value to var(--width). We are appending this from slider value where we declared in global variables in :root.

.front, .back {
    position: absolute;
    height: 600px;
    width: var(--width);
    background: url("https://shorturl.at/kbKhz") no-repeat;
    background-size: cover;
    z-index: 1;
}

Lets send .back div behind .front div with z-index and make it grayscale.

.back {
    filter: grayscale(1);
    width: 100%;
    z-index: 0;
}

Output:

You can try with different variations in CSS like blur, invert etc like below.

.back {
    filter: blur(5px);
    width: 100%;
    z-index: 0;
}

invert

.back {
    filter: invert(1);
    width: 100%;
    z-index: 0;
}

Watch Demo

Thank you for watching...