Slider values not being updated as the value increases

I am trying to create a slider that moves as the values increment after pressing space, and that we can also move it back or forward. The background color changes based on this.

My problem is that the slider Val is always set to 0, so it doesn't move as the increment goes up. How do I solve this?

Also, it only starts the increment after first clicking on the canvas and then pressing space, is this normal or is it another bug?

Thanks!

var bg;
var inc = 0;
var val = 0;
var initalize = false;


function setup() {
  
  createCanvas(400, 100);
  bg = color(0, 0, 0);
  
  // change background every .10 seconds
  setInterval(newBackground, 100);
  
  slider = createSlider(0, 255, val);
  slider.position(width/3, height/2);
  slider.style('width', '150px');
  
} 

function draw() { 
  clear();
  
  background(bg);
  
  fill(255 - bg);

  text(inc, width/2, height/2);
  
  //text(slider.value(), width/2 + 20, height/2)
  
  //Play/pause icon
  if(initalize == true){
      rect(width/2 + 10,height/2 - 40,4,20);
      rect(width/2,height/2 - 40,4,20);
  
   }else{
      triangle(width/2, height/2 - 20,
               width/2, height/2 - 40,
               width/2 + 15, height/2 - 30);
   }
}


function keyPressed() {
  
  if(keyCode == 32) {
    
   initalize =! initalize;
    
  } 
   
}

function newBackground() {
  
  // slider value
  let val = slider.value();
  
  // If initalize is true then continue incrementing
  if(initalize){
     inc++;
  } 
   
  // If we reached the max color (255) then set the initialize to false
  if(inc == 255){
   inc == 255;
   initalize = false;
  }
  else{ // If we just paused then just keep the value
     inc
  }
  
  // If we reached the max value and try to initilize it again then set it back to the start
  if(inc > 255){
    inc = 0;
  }

  // Increment values if initilize is true
  if(initalize){      
      bg = val += inc;
  } else {
      bg = inc; 
  }
  
}

html, body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Solution

I'm not sure what exactly this supposed to do, as your newBackground() function has some discrepancies. But, you don't have anywhere in the code where you actually update the slider value.

So you'll need add at the end of newBackground()

slider.value(val);

But you'll find that it doesn't work as expected because you increase and check boundaries of inc variable and than adding it to val. So if you need slider be in sync with background color, you'll need remove inc variable and work solely with value of the slider:

//var bg;
//var inc = 0;
//var val = 0;
var hover;
var slider;
var initalize = false;
function setup() {
  
  let canvas = createCanvas(400, 100);
  canvas.mouseClicked(e =>
  {
    if (hover)
      initalize = !initalize;
  });
  canvas.mouseMoved(e =>
  {
    hover = (e.x >= width/2 - 2 && e.x <= width/2 + 17) &&
            (e.y >= height/2 - 42 && e.y <= height/2 - 18);

    e.target.classList.toggle("hover", hover);

  });
  let bg = color(0, 0, 0);
  
  // change background every .10 seconds
  setInterval(newBackground, 100);
  
  slider = createSlider(0, 255, 0);
  slider.position(width/3, height/2);
  slider.style('width', '150px');
  
} 

function draw() { 
  clear();
  const bg = slider.value();
  background(bg);
  if (hover)
  {
    fill(127);
    stroke(0);
    rect(width/2 - 4, height/2 - 42, 22, 24);
  }
  

  fill(255 - bg);
  
  text(bg, width/2, height/2);
  
  //text(slider.value(), width/2 + 20, height/2)
  
  //Play/pause icon
  if(initalize == true){
      rect(width/2 + 10,height/2 - 40,4,20);
      rect(width/2,height/2 - 40,4,20);
  
   }else{
      triangle(width/2, height/2 - 20,
               width/2, height/2 - 40,
               width/2 + 15, height/2 - 30);
   }
}


function keyPressed(e) {
  if(keyCode == 32) {
    
   initalize =! initalize;
   return false;
  } 
   
}

function newBackground() {
  
  // slider value
  let val = slider.value();
  
  // If initalize is true then continue incrementing
  if(initalize){
     val++;
  } 
   
  // If we reached the max color (255) then set the initialize to false
  if(val == 255){
   val == 255;
   initalize = false;
  }
  
  // If we reached the max value and try to initilize it again then set it back to the start
  if(val > 255){
    val = 0;
  }

  slider.value(val);
  
}

html, body {
  margin: 0;
  padding: 0;
}

canvas.hover
{
  cursor: pointer;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

As of why you have to click the canvas first: is because the snippet is loaded in iframe. The iframe is not in focus initially, so events are not sent to it until it's in focus.