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

<article class="blurb__wrapper">
    <section>
        <p>
            <em>Complete</em> and <em>easy-to-use</em> virtual guide for learning, understanding, and visualizing the complexities of human anatomy in 3D.
            Includes information and images for each anatomical system and part, multiple options to interact with the <em>3D anatomy</em> models (hiding, fading, etc), and much more.
        </p>
        <p class="hide-on-mobile">
            The <%= site.site_name %> app can be downloaded and tested for free, which contains the skeleton and ligaments, other anatomical systems can be purchased separately.
            The anatomy app is available on <em>most platforms</em> (android, iOS, windows and mac) and can be used on your phone, tablet or desktop pc.
        </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="59" 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: 59%;
  }
</style>