// map() reference https://p5js.org/reference/#/p5/map

​

let minSlider = 0;

let maxSlider = 10; //max value on the slider

let sliderX;

let defaultText = 5;

const buttonW = 50;

const sliderPadding = 20;

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

  textSize(120);

  textAlign(CENTER, CENTER);

  sliderX = width / 2;

}

​

function draw() {

  background(0);

​

  let currentPos = map(sliderX, sliderPadding, width - sliderPadding, minSlider, maxSlider);

​

  fill(0);

  stroke(255);

  rect(width / 2, height - buttonW, width - sliderPadding * 2, buttonW / 3, 25);

  ellipse(sliderX, height - buttonW, buttonW, buttonW);

​

  fill(255);

  text(defaultText, width / 2, height / 2);

​

  if (mouseIsPressed) {

    if (mouseX > sliderPadding + buttonW / 2 && mouseX < width - (sliderPadding + buttonW / 2)) {

      sliderX = mouseX;

    }

    defaultText = ceil(currentPos);

  }

​

}