# How to make a slider

**URL:** <https://discourse.processing.org/t/how-to-make-a-slider/27073>\
**Category:** Libraries\
**Created:** [January 15, 2021, 3:10am UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073 "2021-01-15T03:10:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 15, 2021, 3:10am UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/1 "2021-01-15T03:10:02Z")

</div>

_I would like to know how to create 2 sliders, one for the thickness of stroke and the other one for opacity. I am planning to create 5 types of brushstrokes, I hope to make the program, so every time I select a brushstroke gives me the option to change the thickness and opacity on the side while drawing._

if this is possible to create let me know how!!

Thank you,

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 15, 2021, 3:36am UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/2 "2021-01-15T03:36:53Z")

</div>

Hello,

There are lots of resources (references, tutorials, examples, etc.) here:

- [processing.org](https://discourse.processing.org/t/a-very-simple-draw-and-save-program/12669)

One example:

- [Scrollbar \ Examples \ Processing.org](https://processing.org/examples/scrollbar.html)

One library I am aware of:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/756117e8b47354676ff0db9f9e67e0873a1c11bc.png)

There may be others…

`:)`

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 15, 2021, 3:37am UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/3 "2021-01-15T03:37:46Z")

</div>

Alright Thank you, I will definitely look into it… well I don’t know anything about the library so hopefully it isn’t extremely hard.

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 15, 2021, 7:23pm UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/4 "2021-01-15T19:23:05Z")

</div>

When I first started programming, I made a color creator program with sliders

```auto
int w = 600;
int h = 600;

float r = 125; //red part
float g = 50; //green part
float b = 5; //blue part

float range = 500; //size of slider
float yrange = 25;
float min = 0;
float max = 255;

float xR = w / 2; //where is red slider
float xG = w / 2; //where is green slider
float xB = w / 2; //where is blue slider

float yR = w/3 * 2; //where is red slider 
float yG = w/3 * 2.3; //where is green slider
float yB = w/3 * 2.6; //where is blue slider

int kw = 15; //kazauc width
int kh = 45; //kazauc height

void setup() {
  size(600,600); //width = w, height = h;
  rectMode(CENTER);
  textAlign(CENTER);
}

void draw() {
  if(r < min) { r = min; } else if(r > max) { r = max; }
  if(g < min) { g = min; } else if(g > max) { g = max; }
  if(b < min) { b = min; } else if(b > max) { b = max; }
  
  
  background(r,g,b);
  noStroke();
  fill(100);
  rect(width/2, h/3 * 2.5,width,w/5*2.5);
  strokeWeight(8);
  stroke(50);
  noFill();
  rect(w/2,h/2,w,h,8);
  
  strokeWeight(4);
  stroke(150);
  
  fill(r,0,0);
  rect(xR,yR,range,yrange,8);
  
  
  fill(0,g,0);
  rect(xG,yG,range,yrange,8);
  
  
  fill(0,0,b);
  rect(xB,yB,range,yrange,8);
  
  
  fill(255);
  
  float rX = map(r,min,max,xR - range/2, xR + range/2);
  float gX = map(g,min,max,xG - range/2, xG + range/2);
  float bX = map(b,min,max,xB - range/2, xB + range/2);
  
  rect(rX,yR,kw,kh,6);
  rect(gX,yG,kw,kh,6);
  rect(bX,yB,kw,kh,6);
  
  if(mousePressed) {
    if(mouseX > xR - range/2 && mouseX < xR + range/2) { if(mouseY > yR - yrange/2 && mouseY < yR + yrange/2) { r = map(mouseX,w/2 - range/2,550,min,max); }}
    
    if(mouseX > xG - range/2 && mouseX < xG + range/2) { if(mouseY > yG - yrange/2 && mouseY < yG + yrange/2) { g = map(mouseX,w/2 - range/2,550,min,max); }}
    
    if(mouseX > xB - range/2 && mouseX < xB + range/2) { if(mouseY > yB - yrange/2 && mouseY < yB + yrange/2) { b = map(mouseX,w/2 - range/2,550,min,max); }}
  }
  textSize(30);
  text("R = " + floor(r), 90, height - 25);
  text("G = " + floor(g), w/2, height - 25);
  text("B = " + floor(b), w - 90, height - 25);
  
  println("[mouse X = " + mouseX + "] [mouse Y = " + mouseY +"]");
}

```

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 16, 2021, 12:40am UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/5 "2021-01-16T00:40:23Z")

</div>

Alright Thanks, this will definitely help.

Regards,

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 16, 2021, 12:40pm UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/6 "2021-01-16T12:40:08Z")

</div>

I made a slider class. If you want here it is!

> **Code**
>
> ```auto
> int sel = -1;
> ArrayList<Slider> sliders = new ArrayList<Slider>();
> 
> void setup() {
> size(600, 600);
> rectMode(3);
> //float id_, float sx_, float sy_, float w_, float h_, float w2_, float h2_, float v_, float min_, float max_, color start_, color end_, color selector_, color hover_, color pressed_, float round_, float round2_) {
> sliders.add(new Slider(0, 300, 500, 500, 50, 20, 100, 50, 0, 255, color(255, 0, 0), color(0, 0, 255), color(255, 0, 0), color(0, 255, 0), color(0, 0, 255),10,5));
> sliders.add(new Slider(1, 300,300,100,20,10,50,0,0,1,color(255,255,0),color(0,255,255),color(255),color(255),color(255),100,100) );
> }
> void draw() {
> background(0);
> for (int i = 0; i < sliders.size(); i++) sliders.get(i).display();
> updateSliders();
> }
> void updateSliders() {
> if (mousePressed) for (int i = 0; i < sliders.size(); i++) {
> Slider temp = sliders.get(i);
> if (sel == i) temp.v = constrain(map(mouseX, temp.sx-temp.w/2, temp.sx + temp.w/2, 0, 100), 0, 100);
> sliders.set(i, temp);
> }
> }
> void mousePressed() {
> for (int i = 0; i < sliders.size(); i++) {
> Slider temp = sliders.get(i);
> if (touching(map(temp.v, 0, 100, temp.sx-temp.w/2, temp.sx+temp.w/2), temp.sy, temp.w2, temp.h2, mouseX, mouseY)) {
> sel = i;
> temp.v = constrain(map(mouseX, temp.sx-temp.w/2, temp.sx + temp.w/2, 0, 100), 0, 100);
> }
> sliders.set(i, temp);
> }
> if(sel == -1) {
> sliders.add(new Slider(sliders.size(),mouseX,mouseY,random(50,300),random(15,50),random(100,10),random(20,50),random(100),0,100,rndClr(),rndClr(),rndClr(),rndClr(),rndClr(),random(0,15),random(0,5)));
> }
> }
> void mouseReleased() {
> sel = -1;
> }
> color rndClr() {
> return(color(random(255),random(255),random(255)));
> }
> 
> boolean touching(float x_, float y_, float w_, float h_, float px_, float py_) { //working only for rectMode(CENTER)
> return(px_ > x_ - w_/2 && px_ < x_ + w_/2 && py_ > y_ - h_/2 && py_ < y_ + h_/2);
> }
> class Slider {
> float id, sx, sy, w, h, w2, h2, v, min, max, round, round2;
> color start, end, selector, hover, pressed;
> boolean hoverOver = false;
> Slider(float id_, float sx_, float sy_, float w_, float h_, float w2_, float h2_, float v_, float min_, float max_, color start_, color end_, color selector_, color hover_, color pressed_, float round_, float round2_) {
> id = id_;
> sx = sx_;
> sy = sy_;
> w = w_;
> h = h_;
> h2 = h2_;
> w2 = w2_;
> v = v_;
> min = min_;
> max = max_;
> start = start_;
> end = end_;
> selector = selector_;
> hover = hover_;
> pressed = pressed_;
> round = round_;
> round2 = round2_;
> }
> void display() {
> stroke(255);
> float x_ = map(v, 0, 100, sx-w/2, sx+w/2);
> hoverOver = touching(x_, sy, w2, h2, mouseX, mouseY);
> fill( lerpColor(start, end, v/100));
> rect(sx, sy, w, h,round);
> fill( (((sel == id)? pressed : (((hoverOver)? hover : selector )))));
> rect(x_, sy, w2, h2,round2);
> }
> float getValue() {
> return(map(v, 0, 100, min, max));
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 16, 2021, 6:38pm UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/7 "2021-01-16T18:38:16Z")

</div>

Can you give me and brief understanding of that code and ideas on how I can tackle it to match my situation, this is really new to me. Can you tell me where I should begin Thanks.

Regards,

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [January 16, 2021, 6:57pm UTC](https://discourse.processing.org/t/how-to-make-a-slider/27073/8 "2021-01-16T18:57:45Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/36710b77c6df438d98dcc391dfabcfbbf8bbfc60.png)

you could create a class to manage all of this.  
then add functionality to the sliders or bind them to other classes.