A horizontal slider control button created by u/liberal_destroyer3 (reddit)

basic_Slider.pde

Slider slider;

void setup() {
  size(720, 720);
  colorMode(HSB,360);
  float sliderSize = 400;
  PVector sliderPos = new PVector((width-sliderSize)/2, height-50); //to put in the middle-bottom screen
  float startValue = 0;
  float endValue = 360;
  slider = new Slider(sliderPos, sliderSize, startValue, endValue,0);
}
void draw() {
  background(slider.getSliderValue(),360-slider.getSliderValue(),slider.getSliderValue());
  fill(360-slider.getSliderValue(),360,360);
  text("Slider Value = " +String.format("%.1f", slider.getSliderValue()), 10, 18); //to get 1 decimal point
  slider.trackSlider();
  println(floor(slider.getSliderValue()*10)/10.0); //to get 1 decimal point
}

/*
Original Source code at:
https://www.reddit.com/r/processing/comments/fbwsbd/circle_draws_sin_waves_interesting_program_i_made/
Slider class author: u/liberal_destroyer3 -- https://www.reddit.com/user/liberal_destroyer3
*/
//helper functions on slider variable———————————————————————————————————————————————
void mouseMoved() {
 slider.checkHighlight();
}
void mousePressed() {
 slider.checkPressed();
}
void mouseReleased() {
 slider.held=false;
 slider.checkHighlight();
}
//end———————————————————————————————————————————————————————————————————————————————

//A horizontal slider control button
class Slider {
  color Color=color(220);
  color sliderColor=color(200);
  color highlightColor=color(190);
  color heldColor=color(170);
  float r=9;
//—————————————————————————————————————————————————————————————————

  PVector pos;
  float len;
  float startValue;
  float endValue;
  float sliderPos;
  boolean highlight=false;
  boolean held=false;
  Slider(PVector pos, float len, float startValue, float endValue) {
    this.pos = pos;
    this.len = len;
    this.startValue = startValue;
    this.endValue = endValue;
    sliderPos=(pos.x+len+pos.x)/2;
    //println(sliderPos);
  }
  Slider(PVector pos, float len, float startValue, float endValue, float startPos) {
    this.pos = pos;
    this.len = len;
    this.startValue = startValue;
    this.endValue = endValue;
    float x = map(startPos, startValue, endValue, pos.x, pos.x+len);
    sliderPos=x;
  }
  
  float getSliderValue() {
    float x = map(sliderPos, pos.x, pos.x+len, startValue, endValue);
    return x;
  }
  
  void trackSlider() {
    this.update();
    this.display();
    this.getSliderValue();
  }
  
  void update() {
    if(held) {
      cursor(HAND);
      sliderPos=mouseX; 
      sliderPos=constrain(sliderPos,pos.x,pos.x+len);
    } else if(highlight) {
      cursor(HAND);
    } else {
      cursor(ARROW);
    }
    
  }
  
  void display() {
    strokeWeight(1);
    int b=5;
    float rt;
    fill(Color);
    rect(pos.x-b, pos.y-b,len+b*2, b*2,6);
    if(held) {
     fill(heldColor);
     rt=r+2;
    } else if(highlight) {
      fill(highlightColor);
      rt=r+2;
    } else {
      fill(sliderColor);
      rt=r;
    }
    //println(sliderPos);
    circle(sliderPos, pos.y, rt*2);
  }
  
  boolean mouseOver() {
    return dist(mouseX,mouseY,sliderPos,pos.y)<r;
  }
  
  void checkHighlight() {
    if(mouseOver()) {
      highlight=true;
    } else {
      highlight=false;
    }
  }
  void checkPressed() {
    if(mouseOver()) {
      held=true;
    } else {
      held=false;
    }
  }
  //end
}