<section class="beforeAfter">
    <div class="beforeContainer">
        <img src="https://placehold.it/450x250/FEDD31" class="beforeImage" />
    </div>
    <div class="afterContainer">
        <img src="https://placehold.it/450x250/9A8297/ffff"  class="afterImage" />
    </div>
        <div class="sliderContainer">
        <input type="range" id="slider">
    </div>
    </section>

body, html
{
  height: 100%;
  background: #94C3E5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beforeAfter
{
  position: relative;
}

.beforeContainer
{

}

.afterContainer
{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  border-right: 1px solid white;
}

.sliderContainer
{
  position: absolute;
  width: calc( 100% + 30px);
  height: 100%;
  top: 0;
  left: -15px;
  display: flex;
  justify-content: center;
  align-items: center;

}

#slider
{
  width: 100%;
  height: 100%;
  position: relative;
}

/*  Removing Base overides -> https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */



input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;

  &::-webkit-slider-thumb
  {
    -webkit-appearance: none;
    height: 30px;
    width: 30px;
    border-radius: 30px;
    background: #ffffff;
    cursor: pointer;
    margin-top: 0;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  }

  &:focus
  {
    outline: none;

    &::-webkit-slider-thumb 
    {
      border: 1px solid blue;
    }

  }

}

const updateAfterContainer = () => {
    const afterContainer = document.getElementsByClassName('afterContainer')[0];
    afterContainer.value = 50;
    return e => afterContainer.style.width = `${e.target.value}%`;
};

const slider = document.getElementById('slider');

slider.addEventListener('input', updateAfterContainer());