Question

I’m trying to code a slider from scratch and I’ve got a basic functionality, but I’d like to be able to drag the sliders beyond the bounds I created for clicking on it.

void slide()
{
  if ((x+w >= mouseX) && (mouseX >= x) && (y+h >= mouseY) && (mouseY >= y) &&
      (mousePressed == true))
  { 
      h = (mouseY - y);
  }

As you can see when the mouse is dragged outside of the slider dimensions, the height value no longer changes. How can I activate only within the dimensions then drag outside of them?

Answer 1

I have done this trough a boolean to control the click and lock, like:

class Test {
  //global  
  float x;
  float y;
  float w, h;
  float initialY;
  boolean lock = false;

  //constructors

  //default
  Test () {
  }

  Test (float _x, float _y, float _w, float _h) {
    x=_x;
    y=_y;
    initialY = y;
    w=_w;
    h=_h;
  }


  void run() {

    float lowerY = height - h - initialY;
    float value = map(y, initialY, lowerY, 100, 255);
    color c = color(value);
    fill(c);
    rect(x, initialY, 4, lowerY);
    fill(200);
    rect(x, y, w, h);
    float my = constrain(mouseY, initialY, height - h - initialY );
    if (lock) y = my;
  }


  boolean isOver()
  {
    return (x+w >= mouseX) && (mouseX >= x) && (y+h >= mouseY) && (mouseY >= y);
  }
}


//end of class

Test[] instances =  new Test[3]; 

void setup() {
  size(200, 600);
  noStroke(); 
  instances[0] = new Test(20, 20, 40, 20);
  instances[1] = new Test(80, 20, 40, 20);
  instances[2] = new Test(140, 20, 40, 20);
}

void draw() {
  background(100);
  for (Test t:instances)
    t.run();
}


void mousePressed() {
  for (Test t:instances)
  {
    if (t.isOver())
      t.lock = true;
  }
}

void mouseReleased() {
  for (Test t:instances)
  {
      t.lock = false;
  }
}