math tool

math.html

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script src="http://libs.baidu.com/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://libs.baidu.com/jqueryui/1.10.2/themes/smoothness/jquery-ui.css">

<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>-->

a:<input id="a" value="56.5" /><div id="s-a" class="slider"></div><br>
b:<input id="b" value="56.5" /><div id="s-b" class="slider"></div><br>
c:<input id="c" value="56.5" /><div id="s-c" class="slider"></div><br>
d:<input id="d" value="56.5" /><div id="s-d" class="slider"></div><br>
e:<input id="e" value="56.5" /><div id="s-e" class="slider"></div><br>
f:<input id="f" value="56.5" /><div id="s-f" class="slider"></div><br>
g:<input id="g" value="56.5" /><div id="s-g" class="slider"></div><br>
h:<input id="h" value="56.5" /><div id="s-h" class="slider"></div><br>

<p><b>a*0.02+b*0.07+c*0.11+d*0.28+e*1.12+f*2.24+g*3.36+h*4.48=</b><span id="result1"></span> (452)</p>
<p><b>a+b+c+d+e+f+g+h=</b><span id="result2"></span> (452)</p>

<script>
var v = {};
$(function () {

  function calc() {
    // get all var
    $("input").each(function (key, val) {
      v[this.id] = Number($(this).val());
    });
    // calc
    var result1 = v.a*0.02+v.b*0.07+v.c*0.11+v.d*0.28+v.e*1.12+v.f*2.24+v.g*3.36+v.h*4.48,
      result2 = v.a+v.b+v.c+v.d+v.e+v.f+v.g+v.h;
    // set result
    $("#result1").html(result1);
    $("#result2").html(result2);
  }
  calc();
  
  $("input").on("change", function () {
    calc();
  });
  

  $( ".slider" ).slider({
    value:56,
    min: 30,
    max: 100,
    step: 1,
    slide: function( event, ui ) {
      console.log();
      $("#" + this.id.replace("s-", "")).val( ui.value );
      calc();
    }
  });
  //$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>