Send Value to slider in the index.html from p5sketch?

Hi All-

I have a slightly complex index.html page with additional js that allows the user to switch between different sketches. In each sketch I have coded 2 sliders that live in the index outside of the canvas. The idea is that in each sketch there are 2 variables assigned to those sliders so that no matter what the user can adjust 2 parameters of the sketch.

My issue is that i dont always want to start the sliders at value 0. the range is 0-100 and i map another variable from whatever i want the range to be to 0-100. Lets say in the example below my range is 10-200 that is mapped to 0-100 as you can see. When the sketch is launched i want to set the value to lets say 70. I have looked at value(); and it doesnt seem right. I am able to get the value no problem as you can see in my code, what am i missing to set the value? Something I should do in setup. Let me know! Thanks!

function p5Sketch01() {

    let t = 0;
    var sketchSlider01 = 0, sketchSlider01map;
    var sketchSlider02 = 0, sketchSlider02map;

    p5Master = new p5(function (p) {
        p.setup = function () {
            var p5Cnv = p.createCanvas(WIDTH, HEIGHT, p.P2D);
            var canvasElement = document.getElementById("p5-canvas");
   = "426px";
   = "240px";
            audioContext = p.getAudioContext();
        p.draw = function () {
            sketchSlider01 = document.getElementById("sketchSlider1").value;
            sketchSlider01map =, 0, 100, 10, 200);
            sketchSlider02 = document.getElementById("sketchSlider2").value;
            sketchSlider02map =, 0, 100, .05, .6);
            var bgColor = document.getElementById("p5-bg-color").value;
            var strokeColor = document.getElementById("p5-stroke-color").value;
            p.background("#" + bgColor);
            p.stroke("#" + strokeColor);
            //loop for adding 70 lines
            for(let i = 0;i<sketchSlider01map;i++){

            // function to change initial x co-ordinate of the line
            function x1(t){
                return p.sin(t/10)*125+p.sin(t/20)*125+p.sin(t/30)*125;
            // function to change initial y co-ordinate of the line
            function y1(t){
                return p.cos(t/10)*125+p.cos(t/20)*125+p.cos(t/30)*125;
            // function to change final x co-ordinate of the line
            function x2(t){
                return p.sin(t/15)*125+p.sin(t/25)*125+p.sin(t/35)*125;
            // function to change final y co-ordinate of the line
            function y2(t){
                return p.cos(t/15)*125+p.cos(t/25)*125+p.cos(t/35)*125;

<!-- Tips:
Format your code with </>
Homework policy:
Asking Questions:

HTML snippet:

            <label>Sketch Slider 1</label>
            <input id="sketchSlider1" type="range" min=0 max=100 value=0 />
            <label>Sketch Slider 2</label>
            <input id="sketchSlider2" type="range" min=0 max=100 value=0 />

You can set the value in setup()

document.getElementById("sketchSlider1").value = "70";

1 Like

Lol well that was easy! I had a feeling it was something like that, will try that now thanks so much!

1 Like