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
Post a Comment