The true delight is in the finding out rather than in the knowing. — Isaac Asimov

<style>
.container {
	position: relative;
	height: 20px;
	width: 550px;
}
 
.bar-container {
	position: relative;
	float: left;
	height: 15px;
	width: 300px;
	border: solid 1px #AAA;
	background: #EEE;
	overlow: hidden;
}
 
.progress-bar {
	position: absolute;
	z-index:1;
	height: 100%;
	width: 33%;
	background: #F60;
}
 
.progress-label {
	position: absolute;
	z-index:2;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 11px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;
}
 
.text-info {
	position: relative;
	float: left;
	height: 15px;
	width: 202px;
	left: 20px;
	font-size: 15px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;
}
</style>

<input type="button" value="less" onclick="doLess()"/>
<input type="button" value="more" onclick="doMore()"/>
Step:&nbsp;
<select id="stepper">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10" selected="true">10</option>
<option value="20">20</option>
</select>
<br/>
<br/>
<div class="container">
	<div class="bar-container">
		<div class="progress-bar" id="progress_bar">
		</div>
		<div class="progress-label" id="progress_label">33 %
		</div>
	</div>
	<div class="text-info" id="text_info">Resting 77% !!
	</div>
</div>

initial_progress = 33;
stepper = 10;
document.getElementById('progress_bar').style.width = initial_progress + "%";
 
function actualizeStepper() {
	stepper = document.getElementById('stepper').value;
	stepper = parseInt(stepper);
}
 
function actualizeNumbers() {
	document.getElementById('progress_bar').style.width = initial_progress + "%";
	document.getElementById('progress_label').innerHTML = initial_progress + "%";
	document.getElementById('text_info').innerHTML = "Resting: " + initial_progress + "%!! ";
}
 
function doMore() {
	actualizeStepper();
	if ((initial_progress + stepper) <= 100) {
		initial_progress += stepper;
		actualizeNumbers();
	}
}
function doLess() {
	actualizeStepper();
	if ((initial_progress - stepper) >= 0) {
		initial_progress -= stepper;
		actualizeNumbers();
	}
}