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

p5.js createButton() Function

SujanDutta

Improve

Article Tags :

p5.js createSlider() Function

Similar Reads

p5.js Environment

p5.js Color

p5.js Shape

p5.js Constants and Structure

p5.js DOM and Rendering

p5.js Transform

p5.js Data

p5.js Events

Thank You!

What kind of Experience do you want to share?