SimpleSliderWithArrows

Gallery
1 
/*
  Simple slider with vertical arrows.
*/

color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);

UpArrow _upArrw;
DownArrow _dwnArrw;
ValueField _valueFld;
Slider _slider;
Button _quit;

final int _txtSize = 22;
final int _btnTxtSize = 22;

final int _initValue = 40;
final int _maxValue = 200;
final int _minValue = 0;

final int _sliderX = 100;
final int _sliderY = 40;
final int _sliderW = 200;
final int _sliderH = 30;

int value = _initValue;

class UpArrow {
  float x, y, w, h;
  color arrwColor;

  // Constructor
  UpArrow(int xpos, int ypos, float wt, float ht, color background) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    arrwColor = background;
  }

  void display() {
    fill(arrwColor); // arrow color
    noStroke();
    triangle(x, y, x + w, y, x + w/2, y - h );
  }
}

class DownArrow {
  float x, y, w, h;
  color arrwColor;

  // Constructor
  DownArrow(int xpos, int ypos, float wt, float ht, color background) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    arrwColor = background;
  }

  void display() {
    fill(arrwColor); // Arrow color
    noStroke();
    triangle(x, y, x + w, y, x + w/2, y + h );
  }
}

class Slider {
  float x, y, w, h;
  color barColor;
  color trimColor;

  // Constructor
  Slider(int xpos, int ypos, float wt, float ht, color background, color foreground) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    barColor = background;
    trimColor = foreground;
  }

  void display() {
    stroke(0);
    strokeWeight(1);
    noFill();
    rect(x, y, w, h);
  }
}

class ValueField {
  float x, y, w, h;
  String title;
  color fldColor;
  color txtColor;

  // Constructor
  ValueField(int xpos, int ypos, float wt, float ht, String valueStr, color background, color foreground) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    title = valueStr;
    fldColor = background;
    txtColor = foreground;
  }

  void display(int val) {
    // **** Value Field **** //
    fill(fldColor); // erase old value
    rect(x, y, w, h);
    fill(txtColor); // text color
    textSize(_txtSize);
    textAlign(CENTER);
    text(str(val), x, y, w, h);
    // **** Slider **** //
    fill(255);
    rect(_sliderX, _sliderY, _sliderW*val/_maxValue, _sliderH);
  }
}

class Button {
 float x, y, w, h;
 String title;
 color btnColor;
 color txtColor;
 
 // Constructor
 Button(int xpos, int ypos, float wt, float ht, String titleStr, color background, color foreground) {
   x = xpos;
   y = ypos;
   w = wt;
   h = ht;
   title = titleStr;
   btnColor = background;
   txtColor = foreground;
 }
 
 void display(){
   fill(btnColor);
   noStroke();
   rect( x, y, w, h, 15); // rounded rect
   fill(txtColor);
   textSize(_btnTxtSize);
   textAlign(CENTER);
   text(title, x, y, w, h);
 }
}
void setup() {
  size(500,200);
  background(BLUE);
  _upArrw = new UpArrow(50, 50, 30, 30, GREEN);
  _dwnArrw = new DownArrow(50, 60, 30, 30, GREEN);
  _slider = new Slider(_sliderX, _sliderY, _sliderW, _sliderH, WHITE, BLACK);
  _valueFld = new ValueField(350, 40, 60, 30, str(_initValue), WHITE, BLACK);
  _quit = new Button(width - 50, 30, 30, 30, "Q", LTGRAY, BLACK);
}

void draw() {
  background(BLUE);
  _upArrw.display();
  _dwnArrw.display();
  _slider.display();
  _valueFld.display(value);
  _quit.display();

  // UpArrw Long Press
  if ((mouseX >= _upArrw.x) && (mouseX <= _upArrw.x + _upArrw.w) && (mouseY >= _upArrw.y - _upArrw.h) && (mouseY <= _upArrw.y)) {
    if (mousePressed == true) {
      value++;
      if (value > _maxValue) {
        value = _maxValue;
      }
      _valueFld.display(value);
    }
  }
  // DwnArrw Long Press
  if ((mouseX >= _dwnArrw.x) && (mouseX <= _dwnArrw.x + _dwnArrw.w) && (mouseY >= _dwnArrw.y) && (mouseY <= _dwnArrw.y + _dwnArrw.h)) {
    if (mousePressed == true) {
      value--;
      if (value < _minValue) {
        value = _minValue;
      }
      _valueFld.display(value);
    }
  }
}

void mousePressed() {
  if ((mouseX >= _quit.x) && (mouseX <= _quit.x + _quit.w) && (mouseY >= _quit.y) && (mouseY <= _quit.y + _quit.h)) {
    exit();
  }
}

slider
slider1006×458 14.1 KB

3 Likes
2

Lol I was struggling to comprehend classes for a while but after seeing your code I think I understand now, thanks!