When p5js slider value is released function?

I want to re-draw the canvas when the user is done changing the slider values, how could I do that?

There are two poorly documented (undocumented?) functions on the p5.Element that is returned by createSlider: input() and changed(). Both of these functions take a callback. The callback passed to input() will be called any time the value of the slider changes, as the user is moving the mouse. The callback passed to changed() will be called once the user releases the mouse after having made a change to the slider value. Here’s an example:

let slider;
let liveColor;
let finalColor;
function setup() {
  createCanvas(400, 400);
  finalColor = liveColor = color(128);
  
  slider = createSlider(0, 255, 50);
  slider.input(() => {
    liveColor = color(slider.value())
  });
  
  slider.changed(() => {
    finalColor = color(slider.value());
  });
}

function draw() {
  background(220);
  
  fill(liveColor);
  circle(100, 200, 50);
  
  fill(finalColor);
  circle(300, 200, 50);
}

https://editor.p5js.org/Kumu-Paul/sketches/NNGR8EJmS

And, in case it isn’t clear. If you only want to redraw the canvas when this event happens, then you’ll want to call noLoop() in you setup and then call redraw() in the slider changed() callback.

1 Like