I have a canvas that user can draw but I'm having difficulty to change the size of the brush by using this slider.

Code:
<label for="brush">Brush Size:</label><input name="brush" id="brush_size" type="range" value="5"  min="0" max="100" />
Code:
function sketchit(e) {
        context.beginPath()
        context.moveTo(mouseX, mouseY);
        context.lineTo(mouseX,mouseY)
        context.lineCap = 'round';
        context.lineWidth = document.getElementById('brush_size').value;
        context.strokeStyle = document.getElementById('color').value;
        context.stroke();
        MouseIsDown = true;
    };

$('#brush_size').change(function(e){
	var slider = document.getElementById('brush_size');
	context.lineWidth = $(this).val() + "px";
	)};
What am I doing wrong? Thanks in advance.