p5.js createSlider() Function

0 0 1 minute read

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.

<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"> 
</script> 

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, zambiatek 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!