let thumbWidth = 20;

let minValue = 0;

let maxValue = 100;

let currentValue = 50;

let dragging = false;

​

function setup() {

  createCanvas(600, 200);

  sliderX = 100; // x position of the slider

  sliderY = height / 2; // y position of the slider

  sliderWidth = 400; // width of the slider

}

​

function draw() {

  background(230, 230, 250); // lavender background

​

  // draw the slider track

  stroke(0);

  line(sliderX, sliderY, sliderX + sliderWidth, sliderY);

​

  // calculate and draw the thumb

  let thumbX = map(currentValue, minValue, maxValue, sliderX, sliderX + sliderWidth - thumbWidth);

  fill(0, 255, 255); // neon color for the thumb

  rect(thumbX, sliderY - 10, thumbWidth, 20);

}

​

function mousePressed() {

  // check if mouse is over the thumb

  let thumbX = map(currentValue, minValue, maxValue, sliderX, sliderX + sliderWidth - thumbWidth);

  if (mouseX >= thumbX && mouseX <= thumbX + thumbWidth) {

    dragging = true; // start dragging

  }

}

​

function mouseDragged() {

  if (dragging) {

    // update current value based on mouse position

    currentValue = constrain(map(mouseX, sliderX, sliderX + sliderWidth - thumbWidth, minValue, maxValue), minValue, maxValue);

  }

}

​

function mouseReleased() {

  dragging = false; // stop dragging

}

​