如何獲得自動計算的輸入範圍值

Question

我想使用範圍滑塊來計算輸入值;當我調整滑塊上的量時，我得到的是計算輸出，但如果手動輸入一個值，則滑塊會更改，但計算不會更新。

var finalvalue = ''; 
 
var finalbtprice = ''; 
 
var finalbitvalue = ''; 
 
finalprice = 3449.31; 
 

 
var $rangeslider = $('#js-amount-range'); 
 
var $amount = $('#js-amount-input'); 
 

 
$rangeslider.on('input', function() { 
 
    var newVal = $amount[0].value = this.value; 
 

 
    var textval = parseInt(newVal); 
 

 
    if (textval >= 0 && textval < 1000) { 
 
    finalvalue = 0.16; 
 
    finalbitvalue = textval * finalvalue; 
 
    } else if (textval < 1001 && textval < 3000) { 
 
    finalvalue = 0.14; 
 
    finalbitvalue = textval * finalvalue; 
 
    } else if (textval <= 100000) { 
 
    finalvalue = 0.12; 
 
    finalbitvalue = textval * finalvalue; 
 
    } 
 
    finalbtcvalue = finalbitvalue/finalbtprice; 
 
    if (finalbitvalue) { 
 
    $("#getdolval").html("<strong>" + finalbitvalue.toFixed(2) + "</strong>"); 
 
    } 
 
}); 
 

 
$amount.on('input', function() { 
 
    $rangeslider.val(this.value).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="range" id="js-amount-range" value="10" min="10" max="100000"> 
 
<input type="number" id="js-amount-input" value="10" min="10" max="100000"></input> 
 

 

 
<span id="getdolval">0 $</span>

Answer 1

您已註冊範圍input事件處理程序，但是，已觸發事件change。嘗試觸發input事件。

$rangeslider.val(this.value).trigger('input'); //<-- instead of change() 

$(function() { 
 
    $('[type=range]').on('input', function() { 
 
    console.log('range value', this.value); 
 
    }); 
 

 
    $('[type=text]').on('input', function() { 
 
    $('[type=range]').val(this.value).trigger('input'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" min="1" max="5" value="3" /> 
 
<input type="text" value="0" autofocus="" />