Adding Multiple jQuery UI Slider Values -


i using jquery ui slider - range fixed minimum. need take value 1 slider , add slider value , display result in text box below.

the sliders setup with:

  $(function() {     $( "#slider-range-food" ).slider({       range: "min",       value: 50,       min: 0,       max: 500,       slide: function( event, ui1 ) {         $( "#amountfood" ).val( ui1.value );         total($( "#amountrent" ),ui1);       }     });     $( "#slider-range-rent" ).slider({       range: "min",       value: 50,       min: 0,       max: 500,       slide: function( event, ui2 ) {         $( "#amountrent" ).val( ui2.value );                 total($( "#amountfood" ),ui2);       }     });      $( "#amountfood" ).val( $( "#slider-range-food" ).slider( "value" ) );     $( "#amountrent" ).val( $( "#slider-range-rent" ).slider( "value" ) );    }); 

the function total values is:

  function total(ui1,ui2) {          $( "#amounttotal" ).val( ui1.val()  +  ui2.value );   }   

the html is:

<label for="amountfood">expence food:</label> <input type="text" name="amountfood" id="amountfood" class="text" value="50"> <input type="text" id="amountfood" readonly="readonly" style="border:0; color:#f6931f; font-weight:bold;"> <div id="slider-range-food"></div>  <label for="amountrent">expence rent:</label> <input type="text" name="amountrent" id="amountrent" class="text" value="50"> <input type="text" id="amountrent" readonly="readonly" style="border:0; color:#f6931f; font-weight:bold;"> <div id="slider-range-rent"></div>  <label for="amounttotal">total expence:</label> <input type="text" name="amounttotal" id="amounttotal" class="text" value="50"> <input type="text" id="amounttotal" readonly="readonly" style="border:0; color:#f6931f; font-weight:bold;">  

i copied code jsfiddle this: http://jsfiddle.net/kytkl835/ (fixed version, see below, in http://jsfiddle.net/kytkl835/1/)

running it, shows issue:

$(el).val() text input text value, total function adding values string, ie "50" + 100 = "50100".

you need convert .val() string int, *1 val:

function total(el, slider) {        $( "#amounttotal" ).val((el.val() * 1) + slider.value); } 

(i've renamed args usage make clear why 1 .val() , other .value).

as aside, change total() func take int arguments, it's not reliant on passing correct types (jquery element + slider ui event value) , can used outside event if needed (eg on page load).


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -