Javascript 随着鼠标移动，Div滑块未正确移动

我用Javascript制作了一个滑块，但它的移动不太正确，它似乎在加速，而不是保持与鼠标相同的速度

我知道这是一个逻辑错误，但我不知道我做错了什么，所以我希望有人能发现错误

处理div的功能如下：

var calc = function (e) {
    var dif = e.pageX - clickX;
    var parentWidth = parseInt(window.getComputedStyle(el.parentNode).width);
    var childWidth = parseInt(window.getComputedStyle(el).width);
    var childLeft = parseInt(window.getComputedStyle(el).left);
    var left = childLeft + dif;

    if (left < 0) { left = 0; }
    else if (left > (parentWidth-childWidth)) { left = (parentWidth-childWidth); }

    el.style.left = left + 'px';
};

var calc=函数（e）{
var dif=e.pageX-点击x；
var parentWidth=parseInt（window.getComputedStyle（el.parentNode.width）；
var childWidth=parseInt（window.getComputedStyle（el.width））；
var childLeft=parseInt（window.getComputedStyle（el.left））；
var left=childLeft+dif；
如果（左<0）{left=0；}
如果（左>（parentWidth childWidth））{left=（parentWidth childWidth）；}
el.style.left=左+像素；
};

---

我提供了一个JSFiddle以及它的使用：

非常整洁的小部件/实现。我更新了该文件以使其正常工作

增加

因为除此之外，它从一开始就在计算差异，而不是从上一次计算差异

    var dif = e.pageX - clickX;
    clickX = e.pageX;// update clickX so next time you calculate the right dif