javascript - Sum three text fields whose values are controlled by jqueryui sliders -

i have 3 jqueryui sliders output numbers (stored in arrays) 3 text fields (that have css class .add). need 3 text fields summed , total shown in text field (with id #amount) automatically whenever sliders changed. have tried this:

<script>  var calcprice = jquery.noconflict(); calcprice('.add').change(function () {  var sum = 10;       calcprice('.add').each(function() {         sum += number(calcprice(this).val());     });     calcprice('#amount').val(sum);  }); </script> 

but sums 3 text fields if manually type numbers them. need flexibility change default starting amount (var = sum 10;) whenever needed , have display in #amount field on page load (it not display on page load atm).

for ui slider, need use slider change event , value method value

jquery(function($) {    $('.add').slider({      min: 0,      max: 10    })  });      var calcprice = jquery.noconflict();  var baseprice = 10;  calcprice('#amount').val(baseprice);  calcprice('.add').on('slidechange', function() {    var sum = baseprice;    calcprice('.add').each(function() {      sum += number(calcprice(this).slider('value')) || 0;    });    calcprice('#amount').val(sum);    });

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>  <div class="add" />  <br />  <div class="add" />  <br />  <div class="add" />  <br />  <input id="amount" />