javascript - Slider value addition picks up previous value -
i have made 2 sliders add 2 numbers , outputs in box.
my problem total box picks previous value of sliders.
example: both sliders valued @ 2. total comes out 3. console.log
proved value output previous value(before slide).
i appreciate help, thanks.
here's code snippet demonstrate:
$(document).ready(function() { $('#slider1').slider({ value: 1, min: 1, max: 5, step: 1, slide: function(event, ui) { $("#one").val(ui.value); $("#equals").val(add()); } }); $('#slider2').slider({ value: 1, min: 1, max: 5, step: 1, slide: function(event, ui) { $("#two").val(ui.value); $("#equals").val(add()); } }); function add() { = $('#slider1').slider('value'); b = $('#slider2').slider('value'); total = + b; return total; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <div id="slider1"></div> <div id="slider2"></div> <input type="text" id="one" name="one"> <input type="text" id="two" name="two"> <input type="text" id="equals" name="equals">
in add
function can add values of inputs ids one
, two
total sum value
$(document).ready(function(){ $('#slider1').slider({ value: 1, min: 1, max: 5, step: 1, slide: function( event, ui ){ $("#one").val( ui.value ); $("#equals").val( add() ); } }); $('#slider2').slider({ value: 1, min: 1, max: 5, step: 1, slide: function( event, ui ){ $("#two").val( ui.value ); $("#equals").val( add() ); } }); function add(){ = $('#one').val(); b = $('#two').val(); if(a) = parseint(a); if(b) b = parseint(b); total = + b; return total; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <div id="slider1"></div> <div id="slider2"></div> <input type="text" id="one" name="one"> <input type="text" id="two" name="two"> <input type="text" id="equals" name="equals">
Comments
Post a Comment