自動的に計算された入力範囲値の取得方法

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="" />