javascript - HTML 输入范围的重新映射值

Question

我使用的输入范围允许值从 0 到 100。我需要使用以下规则将值从 slider 映射到输入文本:

<小时/>

      range => text
          0 => 2000
        100 =>  200

相应地使用介于两者之间的值。目前我正在使用以下脚本，该脚本有效，但我想知道:

• 如何将输入文本中的值转换为范围(相反)，例如，当用户输入 2000 时， slider 设置为 0 并相应地设置其间的值:

<小时/>

text => range
2000 => 0
200  => 100

• 与我的代码相比，是否有更好的方法

var slider = document.querySelector('#slider');
var result = document.querySelector('#result');
slider.addEventListener('change', function(event) {
  var sliderValue = event.target.value;
  var maxValue = 2000;
  var coef = 18;
  var calc;
  calc = maxValue - (sliderValue * coef);
  result.value = calc;
});

<input id="slider" type="range" name="points" min="0" max="100" value=0>
<input id="result" type="text" name="result">

Answer 1

<script>
function r2t (r) {
  return ( 2000 + r * (200-2000) / 100 );
}

function t2r (t) {
  return ((t - 2000) * 100) / (200 - 2000);
}
</script>

<div onclick="alert(r2t(0))">r2t(0)</div>
<div onclick="alert(r2t(1))">r2t(1)</div>
<div onclick="alert(r2t(100))">r2t(100)</div>
<div onclick="alert(r2t(200))">r2t(200)</div>
---
<div onclick="alert(t2r(0))">t2r(0)</div>
<div onclick="alert(t2r(200))">t2r(200)</div>
<div onclick="alert(t2r(2000))">t2r(2000)</div>