Javascript/HTML 5 Slider steps issue

I have a HTML 5 Slider that is basically designed (or should be) to change the width of the line in the canvas im painting app im creating. However I have a issue. On moving the slider from initial position it jumps to the middle i.e. 5 and then is stuck there, removing all the steps numbers 1-10 in between. Below is the code I have:

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;
    }

When the slider is in the 1 (default position the line I daw is 1 width and when i move it and it jumps to position 5 the line is a width of 5 so I know that it works fine its just the slider having a problem. If I remove the following from the HTML code the slider moves in steps fine but obviously does nothing:

onchange="this.value='';"

I have uploaded the files to my server so you can see whats going on im using Chrome also - http://marksblog.co.uk/canvas/

Remove line 268 which is causing the JS error as well as removing the onchange="this.value='';" from within the input element and this should resolve your problem in Chrome

check the console.

you are getting an error on line 268 of canvas2.js:

document.getElementById("penwidth").value = newValue;

Uncaught ReferenceError: newValue is not defined