Ranger

Sketch code

let gui;
let x0 = 100, x1 = 300;

function setup() {
    let p5canvas = createCanvas(400, 150);
    // Create the GUI controller for this canvas
    gui = GUI.get(p5canvas);
    gui.ranger('range', 50, 20, 300, 40)
        .limits(60, 340) // Set the min and max permitted values
        .range(x0, x1) // Set initial thumb positions
        .scheme('purple')
        .setAction((info) => {
            x0 = info.low;
            x1 = info.high;
        }
        );
}

function draw() {
    push();
    background(200, 240, 200);
    stroke(0, 140, 0); strokeWeight(2);
    line(x0, 0, x0, height);
    line(x1, 0, x1, height);
    noStroke();
    fill('rgba(255,40,40, 0.5)');
    ellipse(x0, 100, 40, 40);
    fill('rgba(40,40,255, 0.5)');
    ellipse(x1, 100, 40, 40);
    pop();
    gui.draw();
}

Event information

The info object contains the following fields -

Field	Description
source	A reference to the control that generated the event
p5Event	A reference to original event generated by p5.js
low	The current low value of the ranger
high	The current high value of the ranger
final	false if the user is still dragging one of the thumbs or true if the user has released the mouse button.