Progress Bar

Bootstrap Progress Bar with controls

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id=main>
    <div class="progress progress-striped active">
      <div id=bar class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="width: 1%;">
      
      </div>
    </div>
    <div id=controls>
        <button id=minus class="btn btn-danger btn-sm">-</button>
        <button id=reset class="btn btn-warning btn-sm">Reset</button>
        <button id=plus class="btn btn-success btn-sm">+</button>
    </div>
</div>

CSS

#main{
    padding: 35px 20px 0 20px;
}
#controls{
    text-align: center;
}

JavaScript

function getProgress(){ 
    return parseInt($('#bar').attr('aria-valuenow')); 
}

function setProgress(val){
    $('#bar')
        .attr('aria-valuenow', val)
        .html(val+'%')
        .css('width', val+'%');
}

function minus(delta)
{
    var current = getProgress();
    if(current >= delta){
        var newVal = current - delta;
        setProgress(newVal);
    }
}

function plus(delta)
{
    var current = getProgress();
    if(current <= 10 - delta){
        var newVal = current + delta;
        setProgress(newVal);
    }
}

$('#minus').click(function(){
    minus(1);
});   
$('#plus').click(function(){
    plus(1);
});
$('#reset').click(function(){
    setProgress(0);
});