Слайдер сравнения изображений только в CSS (без использования JavaScript)

В этом руководстве мы создадим слайдер сравнения изображений с помощью CSS без JavaScript. Сначала мы создаем входной диапазон слайдера и два div с именами классов «.front» и «.back» внутри родительского div с именем класса «.img-before-after». Затем мы присваиваем встроенную переменную CSS стилю входного диапазона, равную «--timeline:--_slider» со значением «50». Затем мы создаем CSS для элементов img-before-after, input-range и input-slider-thumb. Мы также добавляем фоновые изображения для обоих div .front и .back и присваиваем свойству width значение var(--width). Div .back отправляется за div .front с z-индексом и делается серым. Окончательный вывод показывает слайдер сравнения изображений с эффектом серого цвета на div .back.