Q:

Code is working when value is hard coded but is not working when it is taken from the DOM with getElementByID("x")

So this is my function which i am having the issue with, it is using the p5.js library. 
function SprayCanTool(){

    this.name = "sprayCanTool";
    this.icon = "assets/sprayCan.jpg";

     var spread ;
     var points = 13 ;

    this.draw = function(){
        var r = random(5,10);
        spread =  document.getElementById("size-slider").value;
        if(mouseIsPressed){

            for(var i = 0; i < points; i++){
                point(random(mouseX-spread, mouseX + spread),random(mouseY-spread, mouseY+spread));
            }
        }

    };

    this.populateOptions = function(){
        select(".options").html( " <label>Size of Spray: </label> <input id='size-slider' type='range' min='10' max='200' step='1' value='10'> ");
    }
}

Like shown above, the code doesn't work , i can not adjust the size of the spray and the spray simply does not display onto the canvas at all.
As shown above the minimum value spread can be is 10. When i add console.log(spread,points) into the draw method, the expected 10,13 is outputted into the console. 
When i hardcode the value as any number , and remove the spread =  document.getElementById("size-slider").value; part, the code works as i have intended it to work (except off course i can not adjust the size using the slider)
Does anyone know what is causing this issue?

A:

Ok nevermind my puzzle has unpuzzled itself out now. I was looking in the wrong place, i am getting the error because i was trying to add integer with a float, and with javascript for some reason that adds them together like they were both strings.
I have managed to fix my issue by replacing:
 point(random(mouseX-spread, mouseX + spread),random(mouseY-spread, mouseY+spread));

with
 point(random(int(mouseX)-int(spread), int(mouseX) + int(spread)),random(int(mouseY)-int(spread), int(mouseY)+int(spread)))

