HTML Factor Slider Structure:

<div class="slidecontainer">
    <input type="range" min="10" max="100" value="80" class="slider" id="factorSlider">
    <p>Factor: <span id="factorOutput"></span></p>
</div> 
                              

Factor Slider Global Variables and setup:

//factor slider info global variables 
var factorSlider;
var factorOutput;
var factor;
                                   
//within setup function:
//factor slider code
factorSlider = document.getElementById("factorSlider");
factorOutput = document.getElementById("factorOutput");
factor = float(factorSlider.value)/100.0;
factorOutput.innerHTML = factor;

factorSlider.oninput = function () {
    var fOutput = float(this.value);
    factor = fOutput/100.0;
    factorOutput.innerHTML = factor;   
}                                   
                                    
                                

Information collected from a slider is always 'string' in nature. This means when we get what we think is an 80 from a slider, the software thinks of it as a word like "80."

If we are dealing with whole numbers, we can generally get away with using such values in numeric contexts not involving arithmetic.

If we want to do 'mathy things' with them though we have to jump through some hoops.

To use slider input as a real number we can force the computer to perceive it as a decimal by using the float function which means: 'interpret me as a decimal if you can.' This process is often called 'casting' in a Java environment.

To get 'factor' as a number between .1 and 1, we then just had to divide the 'casted' value by 100.

Incorporating 'factor' in the design:

function draw() {
    if (shouldRefreshBackground) background(lightGray);
    if (shouldDrawGrid) grid.display();
    
    translate(5*inc, 9*inc);
    drawY();
} //end function draw

function drawY(){
    drawBranch();
    drawV(); 
}//end function drawY

function drawBranch(){
   //vertical branch
    strokeWeight(2);
    stroke(branchColor);
    
    line(0, 0, 0, -factor * branchLength);
    if(shouldShowLeaves){
        noStroke();
        fill(leafColor);
        circle(0, -factor*branchLength, .25*inc);
    } 
}//end function drawBranch

function drawV(){
    translate(0, -factor*branchLength);
    //rotate left branchAngleDeg (value from slider)
    rotate(radians(-branchAngleDeg));
    drawBranch();
    //rotate 2* branchAngleDeg (value from slider)
    rotate(radians(2*branchAngleDeg));
    drawBranch();
}//end function drawV