How can I make a slider in this scenario in p5?

I am writing a drawing app and am drawing a bit of a blank. I have this bit written in HTML

<div class="box colourPalette"></div>
  <div class="box options">
    <div class=" buttonOne"></div>
    <div class=" buttonTwo"></div>
  </div>

and I am doing the following to pupulate buttonOne with a button:

this.populateOptions = function() {
    select(".buttonOne").html(
        "<button id='directionButton'>Make Horizontal</button>");
    //  //click handler
    select("#directionButton").mouseClicked(function() {
        var button = select("#" + this.elt.id);
        if (self.axis == "x") {
            self.axis = "y";
            self.lineOfSymmetry = height / 2;
            button.html('Make Vertical');
        } else {
            self.axis = "x";
            self.lineOfSymmetry = width / 2;
            button.html('Make Horizontal');
        }
    });
};

If I wanted to do a slider instead of a button how would I go about doing this?