Слайдер до-после без использования плагинов

<div id="image-comparison">
    <img src="./img/1.jpeg" alt="alt">
    <img src="./img/2.jpeg" alt="alt">
</div>

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

.image-comparison {
    position: relative;
    display: inline-block;
    width: 520px;
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}

.image-comparison__before {
    position: absolute;
    width: 50%;
    overflow: hidden;
}

.image-comparison__image {
    display: block;
}

/* Ползунок */
.image-comparison__slider {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 100%;
    cursor: col-resize;
    outline: none;
    border: none;
}

/* Стрелки */
.image-comparison__slider::before {
    content: "";
    position: absolute;
    top: calc(50% - 15px);
    left: -14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent url("./img/arrows.png") no-repeat center;
    border: 2px solid #fff;
    background-size: 90%;
}

.image-comprison__slider:hover,
.image-comprison__slider:focus,
.image-comprison__slider:hover::before,
.image-comprison__slider:focus::before {
    background-color: #ccc;
    outline: none;
    border: none;
}

function imageComparison(selector) {

    let comparison = $(selector)
        .addClass("image-comparison")
        .prepend('<div class="image-comparison__before"></div>')
        .append('<button class="image-comparison__slider"></button>');

    let images = comparison
        .find("img")
        .addClass("image-comparison__image")
        .css("max-width", comparison.width());

    let before = comparison
        .find(".image-comparison__before")
        .append(images.eq(0));

    comparison
        .find(".image-comparison__slider")
        .on("dragstart", () => false) // отмена drug&drop
        .on("mousedown", function(e) {
            let slider = $(this);
            let doc = $(document).on("mousemove", (e) => {
                let offset = e.pageX - comparison.position().left;
                let width = comparison.width();

                // установим границы, чтобы ползунок не выходил
                if (offset < 0) offset = 0;
                if (offset > width) offset = width;

                slider.css("left", offset + "px");
                before.css("width", offset + "px");
            });

            doc.on("mouseup", () => doc.off("mousemove"));
        });
};

imageComparison("#image-comparison");