滑块范围不能纠正位置

Question

我正在尝试创建自定义范围滑块。除了放大网页，然后重新加载，一切都很好。当我这样做时，范围滑块（绿色背景）不会拖动到正确的位置。

以下是相关代码:(在功能sliderMove第30行中）

cursorPosition = ((e.touches && e.touches[0].clientX) || e.clientX) - startPoint.left;

rangePosition = clamp(cursorPosition, _sliderPositions.rangeStart, _sliderPositions.rangeEnd);
cursorPosition = clamp(cursorPosition - cursorRadius, _sliderPositions.cursorStart, _sliderPositions.cursorEnd);

我做错了什么，我该如何解决？

JSFiddle

console.clear();

function RangeSlider( /** DOM Elem */ parentElem) {
  var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
    slider = document.getElementsByClassName('slider')[0],
    sliderRange = document.getElementsByClassName('sliderRange')[0],
    sliderCursor = document.getElementsByClassName('sliderCursor')[0],
    output = document.getElementById('output'),
    myButton = document.getElementById('myButton');

  var sliderDimention = slider.offsetWidth,
    cursorRadius = sliderCursor.offsetHeight / 2,
    startPoint,
    currentTarget,
    value = 0,
    _sliderPositions = {},
    borderWidth = 1;

  startPoint = getOrigin(wrapperElem.children[0]);
  sliderDimention = slider.offsetWidth;


  function sliderDown(e) {
    e.preventDefault();

    window.addEventListener('mousemove', sliderMove);
    sliderMove(e);
  }

  function sliderMove(e) {
    var rangePosition = 0;
    var cursorPosition = 0;
    reconfigVars();
    if (typeof e === 'object') {
      cursorPosition = ((e.touches && e.touches[0].clientX) || e.clientX) - startPoint.left;
    } else {
      cursorPosition = pixelToPercent(value, 0, 500) / 100 * sliderDimention;
    }
    //console.log(cursorPosition);

    rangePosition = clamp(cursorPosition, _sliderPositions.rangeStart, _sliderPositions.rangeEnd);
    cursorPosition = clamp(cursorPosition - cursorRadius, _sliderPositions.cursorStart, _sliderPositions.cursorEnd);

    sliderCursor.style.transform = 'translateX(' + cursorPosition + 'px)';
    sliderRange.style.transform = 'scaleX(' + rangePosition + ')';

    if (typeof e === 'object') {
      value = percentToPixel((
        (cursorPosition - _sliderPositions.cursorStart) / (_sliderPositions.currentValue - borderWidth * 2)
      ) * 100, 0, 500);
    }
    output.innerHTML = value;
  }


  function reconfigVars() {
    _sliderPositions.rangeStart = borderWidth * 2;
    _sliderPositions.rangeEnd = sliderDimention - borderWidth * 2
    _sliderPositions.cursorStart = startPoint.left - cursorRadius + borderWidth * 2;
    _sliderPositions.cursorEnd = sliderDimention - borderWidth * 2 - cursorRadius * 2;
    _sliderPositions.currentValue = sliderDimention - borderWidth * 2 - startPoint.left - cursorRadius;
  }

  myButton.addEventListener('click', function() {
    sliderMove(500);
    value = 500;
  });






  function mouseUpEvents() {
    window.removeEventListener('mousemove', sliderMove);
  }
  wrapperElem.addEventListener('mousedown', sliderDown);
  window.addEventListener('mouseup', mouseUpEvents);
}



var sliderTest = document.getElementById('sliderTest');
var test = new RangeSlider(sliderTest);







function getOrigin(elm) {
  var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
      top: 0,
      left: 0
    },
    doc = elm && elm.ownerDocument,
    body = doc.body,
    win = doc.defaultView || doc.parentWindow || window,
    docElem = doc.documentElement || body.parentNode,
    clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
    clientLeft = docElem.clientLeft || body.clientLeft || 0;

  return {
    left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
    top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
  };
}

function clamp(val, moreThan, lessThan) {
  if (typeof lessThan === 'undefined') lessThan = 1;
  if (typeof moreThan === 'undefined') moreThan = 0;
  return Math.min(lessThan, Math.max(moreThan, val));
}

function pixelToPercent(pixel, min, max) {
  if (typeof max === 'undefined') return;
  return ((pixel - min) / (max - min)) * 100;
}

function percentToPixel(percent, min, max) {
  if (typeof max === 'undefined') return;
  return ((percent / 100) * (max - min)) + min;
}

.wrapperElem {
  height: 18px;
  width: 100%;
  cursor: pointer;
  display: flex;
}
.slider {
  height: 100%;
  width: calc(100% - 62px);
  border: 1px solid black;
  position: relative;
}
.sliderCursor {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid black;
}
.sliderRange {
  background-color: green;
  position: absolute;
  width: 1px;
  height: 100%;
  transform-origin: left;
}
#output {
  background-color: orange;
}

<div class="wrapperElem">
  <div class="slider">
    <div class="sliderRange"></div>
    <div class="sliderCursor"></div>
  </div>
</div>
<br />
<div id="output"></div>
<button id="myButton">Click Me</button>