title: The createSlider() function creates the slider outside of the canvas. How to position the slider inside the canvas?
body: <p>I'm trying to implement a slider in a canvas using p5.js. If there are no HTML elements in the body of the webpage, then the canvas and the slider are on the top-left corner of the webpage.</p>
  
  <p>However, when I change the position of the canvas, the slider does not stay inside the canvas. The position method sets the position of the slider ABSOLUTE with respect to the webpage.</p>
  
  <p>How do I set the position of the slider inside the canvas?</p>
  
  <p>This is the bare-minimum code to replicate the issue.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=""&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;p5.js example&lt;/title&gt;
      &lt;style&gt; body {padding: 0; margin: 0;} &lt;/style&gt;
      &lt;script src="../p5.min.js"&gt;&lt;/script&gt;
      &lt;script src="../addons/p5.dom.min.js"&gt;&lt;/script&gt;
      &lt;script src="../addons/p5.sound.min.js"&gt;&lt;/script&gt;
      &lt;script src="sketch.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;p&gt;&lt;object width="150" height="150" vspace="100"&gt;&lt;/object&gt; 
              This is some text. This is some text. This is some text.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>The <code>sketch.js</code> file is:</p>
  
  <pre class="lang-js prettyprint-override"><code>var slider;
  function setup() {
    slider = createSlider(0, 255, 100);
    slider.position(10, 10);
    slider.style('width', '80px');
  }
  
  function draw() {
    var val = slider.value();
    background(val);
  }
  </code></pre>