<script src=http://CDN.JSDelivr.net/g/p5.js(p5.min.js+addons/p5.dom.js)></script>

/**
 * Element Relative to Canvas (v1.3)
 * GoToLoop (2016-Jun-09)
 *
 * https://Forum.Processing.org/two/discussion/17074/
 * placing-slider-relative-to-canvas-in-instance-mode#Item_3
 *
 * http://CodePen.io/GoSubRoutine/pen/KNbwLW/right/?editors=101
*/

"use strict";

new p5(p => {
  let slider;

  p.setup = () => {
    p.createCanvas(600, 400);
    slider = p.createSlider(0, 0xff, 0x80).size(p.width>>1, p.AUTO);
    p.windowResized();
  };

  p.draw = () => {
    p.background(slider.value());
  };

  p.windowResized = () => {
    p._renderer.position(p.windowWidth  - p.width  >> 1,
                         p.windowHeight - p.height >> 1);

    const sliderX = (p.width  - slider.width  >> 1) + p._renderer.x,
          sliderY = (p.height - slider.height >> 1) + p._curElement.y;

    slider.position(sliderX, sliderY);
  };
});