jquery - jQuery経由でテキスト入力を更新するには?

Question

さて、私は5つの入力を持っています。金額 ( bet )、チャンス、乗数 ( pay )、利益、およびスライダー。

現在、私のスライダーは、私がやりたいことである勝率を更新します。しかし、スライダーを使用して勝率を更新すると、他の入力は更新されません。テキスト入力を使用して勝率を更新すると、他の入力のみが更新されます。

以下のコードを参照してください。

スライダー jQuery コード:

<script type="text/javascript">
var $chance_txt = $('#chance'),
$chance_slider = $('#chanceslider').on('change', function() {
    $chance_txt.val($chance_slider.val());
});
</script>

テキスト入力の jQuery コード (式や数学に疑問を持たないでください。問題ありません):

    <script>
    $(document).ready(function(){

        function updateValues() {
            // Grab all the value just incase they're needed.
            var chance = $('#chance').val();
            var bet = $('#bet').val();
            var pay = $('#pay').val();
            var profit = $('#profit').val();

            // Calculate the new payout.
            pay = (999/(parseFloat(chance)+0.45))*100/1000;


            // Calculate the new profit.
            profit = bet*pay-bet;
            profit = profit.toFixed(6);

            $('#chance').val(chance);
                            $('#bet').val(bet);
            $('#pay').val(pay);
            $('#profit').val(profit);
        }


        $('#chance').keyup(updateValues);
        $('#bet').keyup(updateValues);
        $('#pay').keyup(updateValues);
        $('#profit').keyup(updateValues);



    });
</script>

HTML コード:

<label for="bet">Bet Amount</label>
    <input type="text" name="bet" id="bet" class="text" placeholder="Amount">
</div>
<div class="form-box">
<label for="pay">Multiplier </label>
<input type="text" name="pay" id="pay" class="text" placeholder="Payout - 2X Default">
</div>
<div class="form-box last">
<label for="profit">Profit </label>
<input type="text" name="profit" id="profit" class="text" placeholder="Profit">
  </div><!-- End Box -->
 <div class="clearfix"></div>
<div class="form-box">
<label for="chance">Win Chance (%)</label><input type="text" name="chance" id="chance" class="text" value="50">
</div>

<p>Slide to choose win chance or enter it in the input!</p><br><input type="range" id="chanceslider" class="vHorizon" step="0.01" min="0.01" max="98" style="background-color: #00aec8; width: 50%;">
</div>