# Cp5 slider progressbar

**URL:** <https://discourse.processing.org/t/cp5-slider-progressbar/29225>\
**Category:** Libraries\
**Created:** [April 8, 2021, 3:57pm UTC](https://discourse.processing.org/t/cp5-slider-progressbar/29225 "2021-04-08T15:57:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![HITman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hitman/32/12641_2.png) [@HITman](https://discourse.processing.org/u/HITman)\
**Post date:** [April 8, 2021, 3:57pm UTC](https://discourse.processing.org/t/cp5-slider-progressbar/29225/1 "2021-04-08T15:57:12Z")

</div>

Hello, how to use slider as progressbar?

If I have 10 lines in array and if for 1 line took 1 second, that means that slider should come to 100% in 10 seconds.

B.R  
Tom

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [April 9, 2021, 7:55am UTC](https://discourse.processing.org/t/cp5-slider-progressbar/29225/2 "2021-04-09T07:55:01Z")

</div>

Hi @HITman,

Please find an example below.  
Also, I would you like to use a slider as a progress bar? It is easier to overlap two rectangles, one being the background and the other being the progress rectangle

```auto
import controlP5.*;

ControlP5 cp5;

int line = 1;
int numOfLines = 10;
int timePerLine = 1000 ; //1 second
int start;

void setup() {
  size(700,400);
  noStroke();
  cp5 = new ControlP5(this);

     
  cp5.addSlider("slider")
     .setPosition(100,height/2)
     .setSize(500,20)
     .setRange(0,100)
     .setValue(0)
     ;
  
  // reposition the Label for controller 'slider'
  cp5.getController("slider").getValueLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
  cp5.getController("slider").getCaptionLabel().align(ControlP5.RIGHT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
  
  start = millis();
}

void draw() {
  background(0);
  fill(255);
  
  
  float percentageProgress = map(line, 1 , numOfLines, 0 , 100);
  cp5.getController("slider").setValue(percentageProgress);
  delay(1000);
  if(line <= numOfLines){
    text("time ellapsed (s) = " + nf(((millis() - start) /1000),0), 50, 50);
    line++;
  }

```

Hope it helps

---

<div class="post-metadata">

**Author:** ![HITman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hitman/32/12641_2.png) [@HITman](https://discourse.processing.org/u/HITman)\
**Post date:** [April 10, 2021, 7:52am UTC](https://discourse.processing.org/t/cp5-slider-progressbar/29225/3 "2021-04-10T07:52:12Z")

</div>

Thank you.

Regards,  
Tom