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

HTML:
Code:
<input type="range" min="0" max="50" value="25" step="2" onChange="sliderChange(this.value)" />
<br /><br />
Slider value = <span id="sliderStatus">25</span>
Javascript:
Code:
function sliderChange(val){ //val holds the value of the slider change. also equals to this.value
	document.getElementById('sliderStatus').innerHTML = val;
}
Also, how do I make the slider to be applied to both the brush and eraser? Right now I have this.

Code:
 // Brush tool instance.
    tool = new brushTool();
    // This brush tool tracks the mouse movements.
    $('#brushTool').click(brushTool);
    function brushTool () {
    	var tool = this;
    	this.mouseStart = false;
    	
    //Eraser Tool
    $('#eraserTool').click(eraserTool);
    function eraserTool () {
    	context.globalCompositeOperation = "destination-out";
    	context.strokeStyle = "rgba(0,0,0,1)";
    }
    
    this.mousedown = function (e) {
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(x,y);
    context.lineCap = 'round';
    context.lineWidth = 3;
    context.strokeStyle = document.getElementById('color').value
    context.stroke();
    tool.mouseStart = true;
    };
Thanks guys!