How To Make Comparison Slider Using Elementor Free

<style>
div#comparison { 
  height: 60vw;
  max-height: 600px;
  max-width: 600px;
  touch-action: none; /* Prevent scrolling while dragging */
}
.figure {  
  height: 100%;
}
#divisor {
  height: 100%;
  pointer-events: none;
}
input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  top: -2rem; 
  left: -6px;
  background-color: transparent;
  width: 102%; 
  cursor: grab;
}
input[type=range]:focus { 
  outline: none; 
}
input[type=range]:active { 
  outline: none;
  cursor: grabbing;
}
input[type=range]::-moz-range-track { 
  -moz-appearance:none;
  height:15px;
  width: 98%;
  background-color: rgba(255,255,255,0.1); 
  position: relative;
  outline: none;    
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width: 30px;
  height: 30px;   
  background: #ffffff38;
  border-radius: 50%;
  outline: 3px solid white;
}
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  width: 30px;
  height: 30px;   
  background: #ffffff38;
  border-radius: 50%;
  outline: 3px solid white;
}   
input[type=range]:focus::-webkit-slider-thumb {
  background: rgba(255,255,255,0.5);
}
input[type=range]:focus::-moz-range-thumb {
  background: rgba(255,255,255,0.5);
}

@media (min-width:768px) and (max-width:1024.98px){
    input[type=range] {
    top: -6rem;
    left: -6px;
}
}

@media (min-width:1025px) and (max-width:1290.98px){
    input[type=range] {
    top: -1em;
}
}
</style>

<script>
var divisor = document.getElementById("divisor"),
    slider = document.getElementById("slider");

function moveDivisor() { 
  divisor.style.width = slider.value + "%";
}

// Listen to both mouse and touch events
slider.addEventListener('input', moveDivisor);
slider.addEventListener('change', moveDivisor);

// Initialize on load
moveDivisor();
</script>