<div class="slider">
  <div class="slider__item">
      <div class="slider__image--before slider__image slider__item--active"></div>
      <div class="slider__image--after slider__image"></div>
  </div>
  <div class="slider__control">
      <button class="slider__button slider__button-prev" type="button">Было</button>
      <div class="slider__indicator">
          <input type="range" min="1" max="100" value="50" class="slider__range">
          <span class="slider__switch to-left"></span>
      </div>
      <button class="slider__button slider__button-next" type="button">Стало</button>
  </div>
</div>

.slider {
    position: relative;
    max-width: none;
    margin: 0;
    margin-top: -45px; }
  .slider__item {
    width: 620px;
    height: 500px;
    position: relative;
    display: flex;
    margin: 0 auto; }
  .slider__image {
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0; }
  .slider__image--before {
    background-image: url("https://cdn1.savepice.ru/uploads/2019/5/7/52ef05ac42a9d21172653a6d509dca37-full.png");
    background-position: -41px 0;
    background-size: 677px 499px;
    left: 0; }
  .slider__image--after {
    background-image: url("https://cdn1.savepice.ru/uploads/2019/5/7/11bdfc45c23af59978f26f336b1f7145-full.png");
    background-position: 59px 0;
    background-size: 545px 517px;
    right: 0;
    left: auto;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }
  .slider__range {
    -webkit-appearance: none;
    width: 430px;
    height: 6px;
    border: none;
    background-color: #dcdcdc;
    margin: 7px 20px 0 20px;
    outline: none; }
    .slider__range:active {
      outline: none; }
    .slider__range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 35px;
      height: 35px;
      border: 12px solid #fff;
      border-radius: 50%;
      box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.3);
      background-color: #68b738; }
      .slider__range::-webkit-slider-thumb:active {
        box-shadow: 0px 0px 5px 3px #68b738;
        transition: box-shadow .1s ease; }
  .slider__button {
    border-bottom: 1px dotted #b8b8b8;
    padding: 0;
    padding-bottom: 5px; } }

var imgBefore   = document.querySelector('.slider__image--before');
var imgAfter    = document.querySelector('.slider__image--after');

var btnBefore   = document.querySelector('.slider__button-prev');
var btnAfter    = document.querySelector('.slider__button-next');


var range       = document.querySelector('.slider__range');
btnBefore.addEventListener('click', function () {
            imgBefore.style.width = '100%';
            imgAfter.style.width = '0%';
            range.value = 0;
    });

    btnAfter.addEventListener('click', function () {
            imgBefore.style.width = '0%';
            imgAfter.style.width = '100%';
            range.value = 100;
    });

     range.addEventListener('input', function() {
            imgBefore.style.width = (100 - range.value) + '%';
            imgAfter.style.width = range.value + '%';
    });