# Placement of sliders outside canvas

**URL:** <https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631>\
**Category:** Coding Questions\
**Created:** [March 26, 2019, 9:15am UTC](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631 "2019-03-26T09:15:41Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 26, 2019, 10:37am UTC](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631/2 "2019-03-26T10:37:57Z")

</div>

Perhaps something like this sketch below, which positions the p5js canvas between 2 images:

> <https://gist.github.com/GoSubRoutine/56bc62553a754febacfe61e6f9239c69>
>
> There are more than three files. show original

But instead of canvas, you’re gonna need to apply the same general idea to your sliders.

Simply create an empty `<tag>` w/ an _id_ attribute right after the p5js’ `<canvas>` element.

Then invoke method p5.Element::**parent()** over each slider, so they are moved inside the container w/ the specified _id_.

For more details, go to the sketch’s original forum post:

> [@Getting a sketch to load between two images on a web page](https://discourse.processing.org/t/getting-a-sketch-to-load-between-two-images-on-a-web-page/7734):
>
> I’d like the script with the sketch.js to load between the two images, but it keeps loading at the end of the two images. Just learning HTML so any help would be great! Thanks! Web page: [http://www.abunchoffailures.com/](http://www.abunchoffailures.com/) Here is the HTML: \<!DOCTYPE html\> \<html\> \<head\> \<script src="p5.min.js"\>\</script\> \<script src="p5.dom.min.js"\>\</script\> \<script src="p5.sound.min.js"\>\</script\> \<link rel="stylesheet" type="text/css" href="style.css"\> \<meta charset="utf-8"\> \<title\>A bunch of …

---

_[View the full topic](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631)._