Bootstrap Snippet custom calc using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"custom calc"
Bootstrap 3.2.0 Snippet by ostrong

Related: See More

Questions / Comments:

"custom calc" Bootstrap 3.2.0 Snippet by ostrong

Related: See More

Questions / Comments:

"custom calc"
Bootstrap 3.2.0 Snippet by ostrong