html5 steps 插件,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:

1

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:

οnchange="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/