let y = 100;

let side = 50;

let rollover = false;

let dragging = false;

let offsetX = 0;

let offsetY = 0;

let sliderStart = 100;

let sliderEnd = 300;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  line(sliderStart, y, sliderEnd, y);

  if (mouseX > x && mouseX < x+side && mouseY > y && mouseY < y+side || dragging) {

    fill(0);

  } else {

    fill(255); 

  }

  if (dragging) {

    x = constrain(mouseX - offsetX, sliderStart, sliderEnd - side);

    // y = mouseY - offsetY;

  }

  rect(x, y-side/2, side, side);

  const bgColor = map(x, sliderStart, sliderEnd - side, 0, 255);

  fill(bgColor);

  rect(sliderStart, 200, 200, 100);

}

​

function mousePressed() {

  if (mouseX > x && mouseX < x+side && mouseY > y && mouseY < y+side) {

    if (!dragging) {

        offsetX = mouseX - x; 

        // offsetY = mouseY - y; 

    }

    dragging = true; 

  } else {

    dragging = false; 

  }

}

​

function mouseReleased() {

    dragging = false; 

}