human-anatomy-3d/src/_includes/blurb.ejs

<article class="blurb__wrapper">
    <section>
        <p>
            Learn human anatomy <em>quickly and easily</em> by zooming, panning, hiding layers and interacting in real
            time.
        </p>
    </section>
    <section>
        <div class="before-and-after">
            <div class='img background-img'></div>
            <div class='img foreground-img'></div>
            <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="before-and-after__slider">
            <div class='slider-button'></div>
        </div>
    </section>
</article>

<script>

    document.querySelector("#before-and-after__slider").addEventListener("input", (e) => {
        const sliderPos = e.target.value;
        // Update the width of the foreground image
        document.querySelector('.foreground-img').style.width = `${sliderPos}%`;
        // Update the position of the slider button
        document.querySelector('.slider-button').style.left = `calc(${sliderPos}% - 18px)`;
    });

</script>

<style>
    .before-and-after .background-img {
        background-image: url("./assets/images/slider-1.png");
        background-position-x: -1px;
    }

    .before-and-after .foreground-img {
        background-image: url("./assets/images/slider-2.png");
        background-position-x: -1px;
        width: 50%;
    }
</style>