Simple Image comparison slider

Make a simple image slider using HTML , CSS and JavaScript. Original post here-http://css-magz.blogspot.com/2017/04/make-image-comparison-slider.html

HTML

<div id="imgcomp">
  <br>
    <figure>
      <div id="divider" style="width: 50%;"></div>
    </figure>
  <input autocomplete="off" id="slider" max="100" min="0" oninput="var divider,slider;if(divider==null)   divider=document.getElementById('divider');if(slider==null)slider=document.getElementById('slider');divider.style.width=slider.value+'%';"   type="range" value="50">
</div>

CSS

div#imgcomp {
width: 600vw;
height: 100vw;
max-width: 640px;
max-height: 360px;
overflow: hidden; }
div#imgcomp figure {
background-image: url(https://1.bp.blogspot.com/-CHLuJUDwH7Y/WP2a9BOneEI/AAAAAAAAAL0/aBMbGuxV-aQYi3WHyVF05DKGVc3ZlGX6QCLcB/s1600/Baahubali-after-vfx-effect-image.jpg);
background-size: cover;
position: relative;
font-size: 0;
width: 100%;
height: 100%;
margin: 0;
}
div#imgcomp figure > img {
position: relative;
width: 100%;
}
div#imgcomp figure div {
background-image: url(https://4.bp.blogspot.com/-NjbTXZG72LM/WP2aBzP6K5I/AAAAAAAAALk/aFwlODiM4UU0Bqp45jAPUe9XdFtUq4uvgCLcB/s1600/Baahubali-before-vfx-effect-image.jpg);
background-size: cover;
position: absolute;
width: 50%;
box-shadow: 2px 0px white;
overflow: hidden;
bottom: 0;
height: 100%;
}

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

input[type=range]::-moz-range-track {
-moz-appearance:none;
height:20px;
width: 98%;
background-color: rgba(255,255,255,0.1);
position: relative;
outline: none;
}
input[type=range]::active {
border: none;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
width: 20px; height: 20px;
background: white;
border-radius:0;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px;
height: 20px;
background: white;
border-radius: 0;
}
input[type=range]:focus::-webkit-slider-thumb {
background: white;
}
input[type=range]:focus::-moz-range-thumb {
background: white;
}

JavaScript

/* No Special JavaScript :P */