​

let x = 100;

​

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  if(mouseIsPressed && mouseX >= 300) {

    background(200,230,250);

    noStroke();

    fill("#FFB039");

    ellipse(300,100,80);

    noStroke();

    fill(40);

    rect(270,85,25,20,5);

    rect(305,85,25,20,5);

    strokeWeight(4);

    stroke(40);

    line(295,95, 305, 95);

  }

  else if(mouseIsPressed && mouseX <300) {

    background(40);

    noStroke();

    fill("#FFDB5D");

    ellipse(300,100,80);

    fill(40);

    ellipse(320,80,80);

  }

​

  //slider bar

  noStroke();

  fill(100);

  rect(100, 190, 400, 20, 10);

​

  //slider controller

  stroke(255);

  strokeWeight(3);

  fill(0,150,220);

  ellipse(x, height / 2, 40);

  //move slider

  if(mouseIsPressed && mouseX < x) {

    x = constrain(mouseX, 100, 500);

    console.log(x)

  }

  else if(mouseIsPressed && mouseX > x) {

    x = constrain(mouseX, 100, 500);

    console.log(x)

  }

}

​