p5.js | createSlider()函数

p5.js 中的 createSlider()函数用于在 DOM（文档对象模型）中创建滑块（输入）元素。此函数包括 p5.dom 库。在 head 部分添加以下语法。

句法：

createSlider( min, max, value, step )

参数：该函数接受上面提到的四个参数，如下所述：

• min：它保存滑块的最小值。
• max：它保存滑块的最大值。
• value：它保存滑块的默认值。
• step：它保存滑块的步长。

下面的程序说明了 p5.js 中的 createSlider()函数：

示例：此示例使用 createSlider()函数使用滑块更改背景颜色（以 rgb 格式）的r值。

// 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);
}                    

输出：

参考： https://p5js.org/reference/#/p5/createSlider