Processing.js applications." />
Processing.js Slider Class
A simple slider class written for Processing.js applications.
 
Code
					
/* 
** Processing Slider Class Demo
** © 2011 Joseph Gray - http://grauwald.com 
** License: http://creativecommons.org/licenses/by-nc-sa/3.0/
*/

Slider slider1 = new Slider(20, 20, 360, 20, "Slide Me");

float r; // circle radius

void setup() {
  size(400, 400);
  smooth();
  background(255);
  slider1.value = .5;
}

void draw() {  
  // background
  fill(255, 16);
  strokeWeight(1);
  stroke(196);
  rect(1,1,width-2,height-2);
  
  // render circle first
  fill(64);
  ellipseMode(CENTER);
  ellipse(width*.5, height*.5, r, r);

  // slider.update() renders slider and
  // returns float in the 0 to 1 range  
  float value = slider1.update(); 
  r = value*width;
	

}


// slider class

class Slider {
  float x, y, w, h, cx;
  float m = 10;
  String label;

  float value;

  Slider(float _x, float _y, float _w, float _h, String _label) {
    x = _x;
    y = _y;
    w = _w;
    h = _h;
    label = _label;
    
    value = .5;
  }

  float update() {
    if (mouseX >= x && mouseX <= x+w && mouseY >= y-m && mouseY <= y+h+m ) {
      if(mousePressed) {
        value = (mouseX-x)/w;
      }
    } 
    render();
    return(value);
  }

  void render() {
    strokeWeight(1);
    // slider area
    stroke(196);
    fill(64);
    rect(x, y, w, h); 
    // cursor
    cx = value*w;
    stroke(128);
    fill(255);
    rect(x+cx, y, 3, h);
    // label
    fill(196);
    text(label, x+5, y+15);
  }
}