'P5.JS & HTML - How to use p5 sliders in HTML to layout them

to showcase my idea, here is an image of my program.

image of my program

On the right you can see two columns with multiple rows of sliders. Since I'm new to p5 I've unfortunately created them in p5 through (createSlider, createCheckbox,...). My goal is to just simply writing them in multiple lines of html code for easier positioning. In the end, I wanna have a container which I can scale according to the screenHeight.

I was wondering if there is an option to refer to my js variables in html.

Here's a small overview of my bad code:

  checkStroke = createCheckbox('Enable Stroke', true)
  checkStroke.position(sliderSecondCol,sliderFirstRow+120)
  sliderStrokeAmount = createSlider(0,0.5,0.04,0.0001)
  sliderStrokeAmount.position(sliderFirstCol,sliderFirstRow+140)
  sliderStrokeHue = createSlider(0,360,200);
  sliderStrokeHue.position(sliderFirstCol,sliderFirstRow+160);
  sliderStrokeSat = createSlider(0,100,30);
  sliderStrokeSat.position(sliderFirstCol,sliderFirstRow+180);
  sliderStrokeBri = createSlider(0,100,100);
  sliderStrokeBri.position(sliderFirstCol,sliderFirstRow+200);
  sliderStrokeAlpha = createSlider(0,1,1,0.0001);
  sliderStrokeAlpha.position(sliderFirstCol,sliderFirstRow+220);

I hope I made my point clear enough, and really hope for some help. It's for a university project, and it's my first time doing such a "big" programming.

Thanks Max

javascripthtmlsliderp5.js


Solution 1:[1]

The solution is to use HTML sliders and then connect them to JavaScript.

HTML slider with minimum input 1, maximum input 100, and start value 50 in a container:

<div id="sliderContainer" >
  <input type="range" min="1" max="100" value="50" id="slider">
</div>

And then add JavaScript in script tags:

<script>
let slider = document.getElementById("slider");
let header = document.getElementById("demo");

slider.oninput = function() {
  header.innerHTML = slider.value;
}
</script>

Put it all together:

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">50</h1>

<div id="sliderContainer" >
  <input type="range" min="1" max="100" value="50" id="slider">
</div>

<script>
let slider = document.getElementById("slider");
let header = document.getElementById("demo");

slider.oninput = function() {
  header.innerHTML = slider.value;
}
</script>

</body>
</html>

If you have any questions on how to add p5.js to this, let me know and I will create an example project for you to download and toy around with. Don't be afraid to ask! :)

Sources: W3Schools HTML Sliders

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Spy_Banana

Related Questions