Reference createSlider()

createSlider()

Creates a slider <input> element.

Range sliders are useful for quickly selecting numbers from a given range.

The first two parameters, min and max, are numbers that set the slider's minimum and maximum.

The third parameter, value, is optional. It's a number that sets the slider's default value.

The fourth parameter, step, is also optional. It's a number that sets the spacing between each value in the slider's range. Setting step to 0 allows the slider to move smoothly from min to max.

Examples

let slider;

function setup() {
createCanvas(100, 100);

// Create a slider and place it at the top of the canvas.
slider = createSlider(0, 255);
slider.position(10, 10);
slider.size(80);

describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
}

function draw() {
// Use the slider as a grayscale value.
let g = slider.value();
background(g);
}
let slider;

function setup() {
createCanvas(100, 100);

// Create a slider and place it at the top of the canvas.
// Set its default value to 0.
slider = createSlider(0, 255, 0);
slider.position(10, 10);
slider.size(80);

describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
}

function draw() {
// Use the slider as a grayscale value.
let g = slider.value();
background(g);
}
let slider;

function setup() {
createCanvas(100, 100);

// Create a slider and place it at the top of the canvas.
// Set its default value to 0.
// Set its step size to 50.
slider = createSlider(0, 255, 0, 50);
slider.position(10, 10);
slider.size(80);

describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
}

function draw() {
// Use the slider as a grayscale value.
let g = slider.value();
background(g);
}
let slider;

function setup() {
createCanvas(100, 100);

// Create a slider and place it at the top of the canvas.
// Set its default value to 0.
// Set its step size to 0 so that it moves smoothly.
slider = createSlider(0, 255, 0, 0);
slider.position(10, 10);
slider.size(80);

describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
}

function draw() {
// Use the slider as a grayscale value.
let g = slider.value();
background(g);
}

Syntax

createSlider(min, max, [value], [step])

Parameters

min
Number:

minimum value of the slider.

max
Number:

maximum value of the slider.

value
Number:

default value of the slider.

step
Number:

size for each step in the slider's range.

Returns

p5.Element: new p5.Element object.
Notice any errors or typos? Please let us know. Please feel free to edit src/dom/dom.js and open a pull request!

Related References

Complete your gift to make an impact