<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <div class="price-box"> <form class="form-horizontal form-pricing" role="form"> <div class="price-slider"> <h4 class="great">Amount</h4> <span>Minimum $1 is required</span> <div class="col-sm-12"> <div id="slider"></div> </div> </div> <div class="price-form"> <div class="form-group"> <label for="amount" class="col-sm-6 control-label">Amount ($): </label> <span class="help-text">Please choose your amount</span> <div class="col-sm-6"> <input type="hidden" id="amount" class="form-control"> <p class="price lead" id="amount-label"></p> <span class="price"></span> </div> </div> <hr class="style"> </div> <div class="form-group"> <div class="col-sm-12"> <button type="submit" class="btn btn-primary btn-lg btn-block">Proceed <span class="glyphicon glyphicon-chevron-right pull-right" style="padding-right: 10px;"></span></button> </div> </div> <div class="form-group"> <div class="col-sm-12"> <img src="http://amirolahmad.github.io/bootstrap-pricing-slider/images/payment.png" class="img-responsive payment" /> </div> </div> </form> </div> </div> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#slider").slider({ animate: true, value:1, min: 1, max: 1000, step: 1, slide: function(event, ui) { update(1,ui.value); //changed } }); //Added, set initial value. $("#amount").val(0); $("#duration").val(0); $("#amount-label").text(0); $("#duration-label").text(0); update(); }); //changed. now with parameter function update(slider,val) { //changed. Now, directly take value from ui.value. if not set (initial, will use current value.) var $amount = slider == 1?val:$("#amount").val(); var $duration = slider == 2?val:$("#duration").val(); /* commented $amount = $( "#slider" ).slider( "value" ); $duration = $( "#slider2" ).slider( "value" ); */ $total = "$" + ($amount * $duration); $( "#amount" ).val($amount); $( "#amount-label" ).text($amount); $( "#duration" ).val($duration); $( "#duration-label" ).text($duration); $( "#total" ).val($total); $( "#total-label" ).text($total); $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); $('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$duration+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); } </script>