修改range滑块min、max属性后滑块位置未匹配对应数值区间问题

• 按钮点击事件的赋值对象错误：你写的this.value = val里this指向被点击的#key按钮，根本不是滑块元素txt，滑块的value一直没被更新为570，自然不会移动到对应位置。
• range控件的渲染逻辑限制：修改min、max属性后，浏览器不会自动根据当前value重新计算滑块位置，只有主动给滑块的value属性赋值时，才会触发位置校准逻辑。

只需要调整按钮点击事件里的赋值逻辑即可：

var txt = document.getElementById('txt');
const output = document.getElementById('output');

txt.onchange = function() {
  $val = this.value;

  if (this.value === this.max) {
    this.max = parseFloat(parseFloat(100) + parseFloat($val));
    this.min = parseFloat(parseFloat(-100) + parseFloat($val));
  } else if (this.value === this.min) {
    this.max = parseFloat(parseFloat(100) + parseFloat($val));
    this.min = parseFloat(parseFloat(-100) + parseFloat($val));
  }

  output.textContent = this.value;
};
txt.onchange();

key.onclick = function() {
  val = '570';

  // round integer to nearest 100
  valR = Math.round(val / 100) * 100;

  // 先更新min、max
  txt.max = parseFloat(valR);
  txt.min = parseFloat(parseFloat(-100) + parseFloat(valR));
  // 给滑块赋值，触发位置重计算
  txt.value = val;
  txt.onchange();
};

<input id="txt" type="range" min="-100" max="100" value="0">
<span id="output"></span>

<button id="key">Get Data</button>

修正后点击按钮，滑块的min为400、max为600、value为570，会自动渲染到靠近右侧的预期位置。

内容的提问来源于stack exchange，提问作者Michael Schwartz