Добавление значения слайдера поднимает предыдущее значение

Question

Я сделал 2 ползунка, которые складывают два числа и выдает его в коробке.

Моя проблема заключается в том, что общая коробка всегда поднимает предыдущее значение ползунков.

Пример: оба ползунка оценены в 2. Но общее количество получается равным 3. console.log доказал, что значение выводит предыдущее значение (перед слайдом).

Я ценю вашу помощь, спасибо.

Вот фрагмент кода, чтобы продемонстрировать:

$(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() { 
 
    a = $('#slider1').slider('value'); 
 
    b = $('#slider2').slider('value'); 
 
    total = a + 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">

Answer 1

В функции add вы можете добавить значения входов с идентификаторами one и two, чтобы получить общее значение суммы

$(document).ready(function(){ 
 
    
 
    $('#slider1').slider({ 
 
     value: 1, 
 
     min: 1, 
 
     max: 5, 
 
     step: 1, 
 
     slide: function(event, ui){ 
 
      $("#one").val(ui.value); \t 
 
      $("#equals").val(add()); 
 
     } 
 
    }); 
 
    
 
    $('#slider2').slider({ 
 
     value: 1, 
 
     min: 1, 
 
     max: 5, 
 
     step: 1, 
 
     slide: function(event, ui){ 
 
      $("#two").val(ui.value); \t 
 
      $("#equals").val(add()); 
 
     } 
 
    }); 
 
    
 
    function add(){ 
 
     a = $('#one').val(); 
 
     b = $('#two').val(); 
 
     if(a) a = parseInt(a); 
 
     if(b) b = parseInt(b); 
 
     total = a + 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">