Progress Bar Increment/Decrement

Question

I need some help with the progress bar from semantic UI. I'm trying to replicate the first example with the increment/decrement button, but for the life of me, can't get it to work, any help on this matter or sample with Javascript code would be greatly appreciated.

Answer 1

The code for that page is located here, and you are looking at this section in particular:

$buttons
  .on('click', function() {
    var
      $progress = $(this).closest('.example').find('.ui.progress')
    ;
    if( $(this).hasClass('increment') ) {
      $progress.progress('increment');
    }
    else {
      $progress.progress('decrement');
    }
  })
;

As you can see, each button is added a click event. Then, $progress get assigned to the closest found progress bar. Finally, we check for the class of the button (to know if it is in/decrement) and the .progress value gets used accordingly.

While we are at it, here's the HTML they use for the buttons:

<div class="example">
  <div class="ui progress">
    <div class="bar">
      <div class="progress"></div>
    </div>
  </div>
  <div class="ui icon buttons">
    <div class="decrement ui basic red button"><i class="minus icon"></i></div>
    <div class="increment ui basic green button"><i class="plus icon"></i></div>
  </div>
</div>