设置捕捉到鼠标悬停的默认滑块位置

Question

我有这个滑块，它由一个包装器和2个div组成。顶部divs宽度与鼠标宽度相匹配，以创建分层滑块效果。

如果鼠标不悬停，如何设置宽度的默认值以返回到中间？

是否可以向左或向右捕捉滑块，即基于鼠标位置的最大宽度/ 0？

以下是代码：

＆＃13;

＆＃13;

document.addEventListener('DOMContentLoaded', function() {

  let wrapper = document.getElementById('wrapper');
  let topLayer = wrapper.querySelector('.top');
  let handle = wrapper.querySelector('.handle');
  let skew = 0;
  let delta = 0;

  if (wrapper.className.indexOf('skewed') != -1) {
    skew = 2000;
  }

  wrapper.addEventListener('mousemove', function(e) {

    topLayer.style.width = e.clientX + skew + delta + 'px';
  })

  output.innerHTML = wrapper.className.indexOf('skewed') {
    skew = 2000;
  }

);
});

＆＃13;

<section id="wrapper" class="skewed">
  <div class="layer top">
    <div class="layer bottom">
</section>

＆＃13;

＆＃13;

＆＃13;