# When p5js slider value is released function?

**URL:** <https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581>\
**Category:** Coding Questions\
**Created:** [June 8, 2021, 7:11pm UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581 "2021-06-08T19:11:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [June 8, 2021, 7:11pm UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581/1 "2021-06-08T19:11:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 8, 2021, 7:21pm UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581/2 "2021-06-08T19:21:51Z")

</div>

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:

```auto
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](https://editor.p5js.org/Kumu-Paul/sketches/NNGR8EJmS)

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 8, 2021, 7:23pm UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581/3 "2021-06-08T19:23:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [October 30, 2021, 9:14am UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581/4 "2021-10-30T09:14:38Z")

</div>

Hi @KumuPaul  
I am trying to implement this in the following code where I need the objects individually to stay fixed at a certain rotation, and when switching the radio button, reset the position of the slider circle to its respective value. But this only is working for the tube. When I uncomment the lines for the box it doesn’t even reset the tube rotation value anymore. Can you tell me where my logic is flawed?

```auto
let box_rX = tube_rX = 0

function setup() {
  createCanvas(400, 300, WEBGL)
  slider = createSlider(0, TWO_PI, 0, 0)
  slider.position(20, 20)
  slider.style("width", "220px")
  radio = createRadio()
  radio.option("tube")
  radio.option("box")
  radio.style("width", "50px")
  radio.position(300, 15)
  radio.option("tube").checked = true
}

function draw() {
  background(220)
  push()
  if (radio.value() == "tube") {
    radio.input(() => {
      slider.value(tube_rX)
    })
    tube_rX = slider.value()
  }
  translate(-100, 0, 0)
  rotateX(tube_rX)
  cylinder(10, 50, 10, 1)
  pop()
  
  push()
  if (radio.value() == "box") {
    //radio.input(() => {
      //slider.value(box_rX)
    //});
    box_rX = slider.value()
  }
  translate(100, 0, 0)
  rotateX(box_rX)
  box(10, 10, 50)
  pop()
}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 30, 2021, 9:26pm UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581/5 "2021-10-30T21:26:19Z")

</div>

You will want to avoid registering event handlers (which is what you are doing when you call `radio.input(() => ... )`) inside of the `draw()` function. This will cause you to have many many event handlers that all do the same thing. Instead you will want to set up a single event handler in your `setup()` function that is responsible for updating the slider to reflect the current selected shape:

```javascript
let box_rX = 0, tube_rX = 0

function setup() {
  createCanvas(400, 300, WEBGL)
  slider = createSlider(0, TWO_PI, 0, 0)
  slider.position(20, 20)
  slider.style("width", "220px")
  radio = createRadio()
  radio.option("tube")
  radio.option("box")
  radio.style("width", "50px")
  radio.position(300, 15)
  radio.option("tube").checked = true
  
  // Whenever the radio button selection changes
  radio.input(() => {
    // update the slider to reflect the selected objects orientation
    if (radio.value() == "tube") {
      slider.value(tube_rX)
    } else {
      slider.value(box_rX)
    }
  });
}

function draw() {
  if (radio.value() == "tube") {
    tube_rX = slider.value()
  } else {
    box_rX = slider.value()
  }
  
  background(220)
  push()
  translate(-100, 0, 0)
  rotateX(tube_rX)
  cylinder(10, 50, 10, 1)
  pop()
  
  push()
  translate(100, 0, 0)
  rotateX(box_rX)
  box(10, 10, 50)
  pop()
}

```

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [October 30, 2021, 10:52pm UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581/6 "2021-10-30T22:52:57Z")

</div>

I get it. This really should be documented in the Reference.  
Thanks a lot once more!