<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1>bespaarcalculator</h1>
<!-- START -->
<div class="price-box">
<form class="form-horizontal form-pricing" role="form">
<div class="price-slider">
<h4 class="great">Hoeveel betaal je nu maandelijks aan je mobiele provider?</h4>
<div class="col-sm-12">
<input type="text" class="form-control" id="input-1" name="input-1" data-slider-min="0" data-slider-max="1000" data-slider-step="1" data-slider-value="5">
</div>
</div>
<div class="price-slider">
<h4 class="great">Hoeveel betaal je voor je basisabonnement?</h4>
<div class="col-sm-12">
<input type="text" class="form-control" id="input-2" name="input-2" data-slider-min="0" data-slider-max="1000" data-slider-step="1" data-slider-value="10">
</div>
</div>
<div class="price-slider">
<h4 class="great">Hoeveel maanden loopt je huidige contract nog?</h4>
<div class="col-sm-12">
<input type="text" class="form-control" id="input-3" name="input-3" data-slider-min="1" data-slider-max="24" data-slider-step="1" data-slider-value="1">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary btn-lg btn-block">Bereken <span class="glyphicon glyphicon-chevron-right pull-right" style="padding-right: 10px;"></span></button>
</div>
</div>
</form>
<div class="result">
<h4>Header</h4>
<p>(1+2)/3=<span class="calculated">0</span></p>
<ol>
<li>
<span data-toggle="collapse" data-target="#collapse1">Step 1</span>
<div class="collapse" id="collapse1">
<p>Deze kostencalculator houdt geen rekening met het gebruik van je mobiele telefoon in of naar het buitenland en het bellen naar service- en premiumnummers. Aan de uitkomsten van deze bespaarcalculator kunnen geen rechten worden ontleend.</p>
</div>
</li>
<li>
<span data-toggle="collapse" data-target="#collapse2">Step 2</span>
<div class="collapse" id="collapse2">
<p>Deze kostencalculator houdt geen rekening met het gebruik van je mobiele telefoon in of naar het buitenland en het bellen naar service- en premiumnummers. Aan de uitkomsten van deze bespaarcalculator kunnen geen rechten worden ontleend.</p>
</div>
</li>
<li>
<span data-toggle="collapse" data-target="#collapse3">Step 3</span>
<div class="collapse" id="collapse3">
<p>Deze kostencalculator houdt geen rekening met het gebruik van je mobiele telefoon in of naar het buitenland en het bellen naar service- en premiumnummers. Aan de uitkomsten van deze bespaarcalculator kunnen geen rechten worden ontleend.</p>
</div>
</li>
</ol>
</div>
</div>
</div>
<link rel="stylesheet" href="https://rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.min.css" />
<script src="https://rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.min.js"></script>
<style>
.slider.slider-horizontal { width:100%; }
.tooltip.top .tooltip-arrow { border-top-color:#0684C3; }
.tooltip-inner { background:#0684C3; }
.tooltip { font-size:14px; }
</style>
