<div id='backgroundSlider'>
<div id="comparisonSlider">
  <figure>
    <div id="range"></div>
  </figure>
  <input type="range" min="0" max="100" value="50" id="slider" oninput="moveRange()">
</div>
<div>

body {
  background-color: #dddeee;
  background-image: url("https://www.transparenttextures.com/patterns/shattered.png");
}

#backgroundSlider {
  width: 65vw;
  height: 65vw;
  max-width: 600px;
  max-height: 600px;
  background-color: #31798f;
  background-image: url("https://www.transparenttextures.com/patterns/shattered.png");
  border-radius: 3%;
  margin: 0 auto;
}

#comparisonSlider { 
  width: 90%;
  height: 90%;
  max-width: 600px;
  max-height: 600px;
  overflow: hidden;
  margin: 0 auto;
  padding-top: 2.5vw;
}

#comparisonSlider figure { 
  background-image: url(https://cdn.pixabay.com/photo/2020/11/28/02/17/lagoon-5783445_960_720.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}

#comparisonSlider figure > img { 
  position: relative;
  width: 100%;
}
#comparisonSlider figure div { 
  background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_960_720.jpg);
  background-size: cover;
  bottom: 0;
  height: 100%;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
}

input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  bottom: 50%;
  left: -2%;
  background-color: rgba(255,255,255,0);
  width: 102%; 
}
input[type=range]:focus,
input[type=range]:active { 
  outline: none; 
  border: none; 
}

input[type=range]::-moz-range-track { 
  -moz-appearance:none;
   width: 98%;
   background-color: rgba(255,255,255,0); 
   position: relative;
   outline: none;    
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width: 35px;
  height: 35px;
  z-index: 1;
  background: #fff;
  border-radius: 50%;
  border: 5px solid #31798f;
}

var range = document.getElementById("range"),
slider = document.getElementById("slider");
function moveRange() { 
	range.style.width = slider.value+"%";
}