p5.js createSlider() Function

Last Updated : 16 Aug, 2023
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. html 
<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. javascript 
// 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
Comment

Explore