The createSlider() function in p5.js is used to create a slider (input) element in the DOM (Document Object Model). This function includes the p5.dom library. Add the following syntax in the head section.
Syntax:
createSlider( min, max, value, step )
Parameters: This function accepts four parameters as mentioned above and described below:
- min: It holds the minimum value of the slider.
- max: It holds the maximum value of the slider.
- value: It holds the default value of the slider.
- step: It holds the step size of the slider.
Below programs illustrates the createSlider() function in p5.js:
Example: This example uses createSlider() function to change the r value of the background-color (in rgb format) using a slider.
// Create a variable for the slider object var color_slider;   function setup() {         // Create a canvas of given size     createCanvas(600, 300);           // Create the slider     color_slider = createSlider(0, 255, 125);           // Set the position of slider on the canvas     color_slider.position(150, 200); }   function draw() {         // Get the value of the slider     // using .value() function     col = color_slider.value();           // Set the value of the background-color     background(col, 200, 100); }                    |
Output:
Reference: https://p5js.org/reference/#/p5/createSlider
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
