<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div class="container"> <br><br><br><br> <div class="row"> <div class="col-sm-6"> <form class="form-horizontal form-pricing" role="form"> <div class="price-slider"> <h4 class="great">How many cigarettes in a packet?</h4> <div class="col-sm-12"> <input type="range" name="Qty" min="0" max="100"data-show-value="true" onchange="updateQty(this.value);"> </div> </div> <div class="price-slider"> <h4 class="great">How many cigarettes in a packet?</h4> <div class="col-sm-12"> <input type="range" name="Cost" min="0" max="100"data-show-value="true" onchange="updateCost(this.value);"> </div> </div> <div class="price-slider"> <h4 class="great">How many cigarettes in a packet?</h4> <div class="col-sm-12"> <input type="range" name="Smkd" min="0" max="100"data-show-value="true" onchange="updateSmk(this.value);"> </div> </div> </div> <div class="col-sm-6"> <div class="price-form"> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label class="control-label">Cost per Month:</label> </div> <div class="col-sm-6"> <input type="hidden" id="total" class="form-control"> <p class="price lead" type="text" id="lblMonth" disabled="disabled" style=""></p> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label class="control-label">Cost per Year:</label> </div> <div class="col-sm-6"> <input type="hidden" id="totalYr" class="form-control"> <p class="price lead" type="text" id="lblYear" disabled="disabled" style=""></p> </div> </div> </div> </div> </div></div></div>

input.ui-shadow-inset.ui-body-inherit.ui-corner-all.ui-slider-input { display: none; } body { padding-top: 60px; } .price-box { margin: 0 auto; background: #E9E9E9; border-radius: 10px; padding: 40px 15px; /*width: 500px;*/ } .ui-widget-content { border: 1px solid #bdc3c7; background: #e1e1e1; color: #222222; margin-top: 4px; } h4.great { margin: 0 0 25px 0; padding: 7px 15px; font-size: 18px; font-weight: 600; } .price-slider { margin-bottom: 70px; } .price-slider span { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 13px; } .form-pricing { background: #ffffff; padding: 20px; border-radius: 4px; } .price-form { background: #ffffff; margin-bottom: 10px; padding: 20px; border: 1px solid #eeeeee; border-radius: 4px; /*-moz-box-shadow: 0 5px 5px 0 #ccc; -webkit-box-shadow: 0 5px 5px 0 #ccc; box-shadow: 0 5px 5px 0 #ccc;*/ } .form-group { margin-bottom: 0; } .form-group span.price { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 14px; } .price-form label { font-weight: 200; font-size: 21px; }

$(document).ready ( function(){ $('#lblMonth').text("0.00"); $('#lblYear').text("0.00"); }); var $Qty; var $Cost; var $Smkd; function updateQty(val) { $Qty = val; Calculate(); } function updateCost(val) { $Cost= val; Calculate(); } function updateSmk(val) { $Smkd = val; Calculate(); } function Calculate() { var Month = ((($Cost / $Qty) * $Smkd) * 30).toFixed(2); //calculation here var Year = ((($Cost / $Qty) * $Smkd) * 365).toFixed(2); if(isNaN(Month)){ $('#lblMonth').text("0.00"); $('#lblYear').text("0.00"); }else{ $('#lblMonth').text("$" + Month); $('#lblYear').text("$" + Year); } }