当对值进行硬编码时，代码起作用，但是当使用getElementByID（“ x”）从DOM中获取值时，代码不起作用

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'> ");
    }
}

就像上面显示的那样，代码不起作用，我无法调整喷雾的大小，并且喷雾根本不会显示在画布上。

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)

有谁知道是什么引起了这个问题？