要素をドラッグ可能にする

私はいくつかの問題を抱えている比較スライダーに取り組んでいます。 mousemoveで移動するのではなく、ハンドルをドラッグ可能にしたいと思います。ドラッグ可能なハンドル用に更新しようとしましたが、正しく機能するように思えません。これにはjQuery UIを使用したくありません。どんな助けも大歓迎です。スクリプトは次のとおりです。

document.addEventListener('DOMContentLoaded', function() {
    var parent = document.querySelector('.splitview'),
        topPanel = parent.querySelector('.top'),
        handle = parent.querySelector('.handle'),
        skewHack = 0,
        delta = 0;
    // If the parent has .skewed class, set the skewHack var.
    if (parent.className.indexOf('skewed') != -1) {
        skewHack = 1000;
    }
    parent.addEventListener('mousemove', function(event) {
        // Get the delta between the mouse position and center point.
        delta = (event.clientX - window.innerWidth / 2) * 0.5;
        // Move the handle.
        handle.style.left = event.clientX + delta + 'px';
        // Adjust the top panel width.
        topPanel.style.width = event.clientX + skewHack + delta + 'px';
    });
});

/* Panels. */
.splitview {
  position: relative;
  width: 100%;
  min-height: 45vw;
  overflow: hidden;
}
.panel {
  position: absolute;
  width: 100vw;
  min-height: 45vw;
  overflow: hidden;
}
.panel .content {
  position: absolute;
  width: 100vw;
  min-height: 45vw;
  color: #FFF;
}
.panel.top .description {
  transform: translateY(-50%);
}
.panel.bottom .description {
  transform: translateY(-50%);
}
.panel .description {
  width: 25%;
  position: absolute;
  top: 50%;
  text-align: center;
  z-index: 999;
}
.panel .description h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: .9;
}
.panel .description ul {
  text-align: left;
  margin-left: 4.5em;
}
.panel .description ul li {
  list-style: disc;
  font-size: 20px;
}
.panel .description h1, .panel .description p, .panel .description ul {
  color: #fff;
}
.panel img {
  box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: brightness(0.3);
  transition: 0.2s ease;
}
.panel img:hover {
  filter: brightness(0.6);
}
.panel .description img {
  position: relative;
  top: 0;
  width: 60%;
  transform: none;
  left: 0;
  box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.15);
  margin-bottom: 1em;
  display: inline-block;
  filter: brightness(1);
}
.bottom {
  background-color: gray;
  z-index: 1;
}
.bottom .description {
  right: 10%;
}
.top {
  background-color: green;
  z-index: 2;
  width: 50vw;
}
.top .description {
  left: 10%;
}
/* Handle. */
.handle {
  height: 100%;
  position: absolute;
  display: block;
  background-color: #fff;
  width: 5px;
  top: 0;
  left: 50%;
  z-index: 3;
}
/* Skewed. */
.skewed .handle {
  top: 50%;
  transform: translateY(-50%);
  height: 200%;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  transform-origin: top;
}
.skewed .top {
  margin-left: -1000px;
  width: calc(50vw + 1000px);
}
.skewed .top .content {
  margin-left: 1000px;
}

 <div class="splitview skewed">
        <div class="panel bottom">
            <div class="content">
                <img src="https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Original">
            </div>
        </div>
        <div class="panel top">
            <div class="content">
                <img src="https://images.pexels.com/photos/707915/pexels-photo-707915.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Duotone">
            </div>
        </div>
        <div class="handle"></div>
    <input type="range" min=0 max=100 value=50/>
    <inpit
    </div>