Javascript / HTML 5 Slider步骤问题

我有一个HTML 5 Slider，它基本上是设计（或应该）来改变画布im绘画应用程序即时创建中的线条宽度。但是我有一个问题。在从初始位置移动滑块时，它跳到中间，即5，然后卡在那里，移除其间的所有步骤1-10。以下是我的代码： HTML：

 <input type="range" name="penwidth" id='penwidth' min="1" max="10" value="1" step="1" onchange="this.value='';" /> <span id="range">1</span>

JS：

  function brushWidth()
    {
        var varWidth = document.getElementById('penwidth').value;
        context.lineWidth = varWidth;
        document.getElementById("penwidth").value = newValue;
    }

当滑块位于1时（默认位置，我想要的线是1宽度，当我移动它并且它跳到位置5时，线的宽度为5，所以我知道它工作正常只是滑块有问题。如果我从HTML代码中删除以下内容，滑块会逐步移动，但显然无效：

onchange="this.value='';"

我已将文件上传到我的服务器，因此您可以看到使用Chrome的情况还有什么 - http://marksblog.co.uk/canvas/