javascript - 如何获取自动计算的输入范围值

Question

我想使用范围 slider 计算输入值；当我调整 slider 上的金额时，我会得到计算输出，但如果我手动输入一个值， slider 会发生变化，但计算不会更新。

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