<div class="BAS">
 <div class="BAS__body">
  <input type="range" min="0" max="100" value="50" class="BAS__line">

  <picture class="BAS__slide BAS__slide_left">
   <source srcset='' type='image/webp'>
   <img src="https://i.ibb.co/ZT2Vb2x/1018276772.jpg" alt="Before images" class="BAS__img">
  </picture>

  <picture class="BAS__slide BAS__slide_right">
   <source srcset='' type='image/webp'>
   <img src="https://i.ibb.co/8BWtqdt/1018276820.jpg" alt="After images" class="BAS__img">
  </picture>
 </div>
</div>

<div class="BAS">
 <div class="BAS__body">
  <input type="range" min="0" max="100" value="50" class="BAS__line">

  <picture class="BAS__slide BAS__slide_left">
   <source srcset='' type='image/webp'>
   <img src="https://i.ibb.co/8BWtqdt/1018276820.jpg" alt="Before images" class="BAS__img">
  </picture>

  <picture class="BAS__slide BAS__slide_right">
   <source srcset='' type='image/webp'>
   <img src="https://i.ibb.co/ZT2Vb2x/1018276772.jpg" alt="After images" class="BAS__img">
  </picture>
 </div>
</div>

*, :before, :after
 box-sizing: border-box
 margin: 0
 padding: 0
 position: relative
 transition: all 0.4s ease

html, body
 height: 100%

$BAS_height: 50vh
$BAS_offset: (5*$BAS_height)/100
$no_animation: 0s linear

.BAS
 height: $BAS_height
 display: flex
 min-height: 90px
 user-select: none
 width: 100%
 &__body
  display: inline-block
  height: 100%
  margin: 0 auto
  padding: 0 $BAS_offset
  &.is-active .BAS__slide_left
   transition: width $no_animation
 &__line, &__slide
  display: block
  height: 100%
 &__line
  opacity: 0
  width: 100%
  z-index: 3
 &__slide
  overflow: hidden
  pointer-events: none
  &_left
   transform: translateY(-100%)
   width: 50%
   z-index: 2
  &_right
   transform: translateY(-200%)
   z-index: 1
 &__img
  height: 100%
  width: auto

document.addEventListener('DOMContentLoaded', function() {
 const baslider = document.querySelectorAll('.BAS');
 
 for (let ibas = 0; ibas < baslider.length; ibas++) {
  const bas = baslider[ibas],
   basBody = bas.querySelector('.BAS__body'),
   basLine = bas.querySelector('.BAS__line'),
   basSlide = bas.querySelector('.BAS__slide_left');
  
  let startPointBasBody, endPointBasBody;
  
  const restartSlider = function() {
   let startPositionSlide = 50;

   basBody.classList.remove('is-active');
   basLine.value = startPositionSlide;
   basSlide.style.width = startPositionSlide + '%';
  };
  
  basLine.addEventListener('input', function() {
   let thisMobile = /mobile/.test(window.navigator.userAgent.toLowerCase());
   console.log(thisMobile);
   if (thisMobile) {
     basBody.classList.add('is-active');
     basSlide.style.width = this.value + '%';
     this.addEventListener('change', restartSlider, false);
    };
  });
  
  basBody.addEventListener('mouseover', function() {
   startPointBasBody = (this.offsetWidth - basLine.offsetWidth)/2;
   endPointBasBody = this.offsetWidth - startPointBasBody;
  });
  basBody.addEventListener('mousemove', function(event) {
   let cursorPosition = event.clientX - this.offsetLeft,
    percentWidthSlide = Math.round(((cursorPosition - startPointBasBody)*100)/basLine.offsetWidth);
   
   basBody.classList.add('is-active');
    
   if (cursorPosition <= startPointBasBody) {
    basLine.value = 0;
    basSlide.style.width = '0%';
   } else if (cursorPosition >= endPointBasBody) {
    basLine.value = 100;
    basSlide.style.width = '100%';
   } else {
    basLine.value = percentWidthSlide;
    basSlide.style.width = percentWidthSlide + '%';
   };
  });
  basBody.addEventListener('mouseleave', restartSlider, false);
 };
});