input type=range设置值为Infinity后滑块气泡未停在最右端如何解决

问题根因 #

原生<input type="range">仅支持接收min到max区间内的有限数值，传入Infinity属于非法值，浏览器会自动将其回退为min和max的中间值，这就是滑块停在中间、控制台输出1300的原因。

实现思路 #

将UI展示逻辑和实际表单提交逻辑分离，不直接给input的value赋值Infinity：

• 需要设置为Infinity时，给input绑定的展示值设为max，保证滑块停靠在最右端
• 用户手动拖动滑块到max位置时，自动将内部维护的实际值设为Infinity
• 表单提交时取内部维护的实际值即可

原生JS修复代码 #

对应你提供的复现代码，修改后如下：

<input
  id="range"
  class="slider__input"
  type="range"
  value="0"
  max="2500"
  min="0"
/>
<button type="button" onclick="setInfinity()">
Set infinity
</button>

const range = document.getElementById("range");
const MAX = 2500;
// 内部维护实际提交用的数值
let actualValue = 0;

function setInfinity() {
  // 滑块UI设为最大值，停靠在最右端
  range.value = MAX;
  // 实际值设为Infinity
  actualValue = Infinity;
}

// 监听滑块拖动事件，同步实际值
range.addEventListener('input', () => {
  const sliderVal = Number(range.value);
  actualValue = sliderVal === MAX ? Infinity : sliderVal;
})

Angular业务代码适配 #

对应你当前的Angular项目代码，修改如下：
组件类中新增get/set拦截器，分离展示值和实际值：

private _realValue: number = 0;

// 给ngModel绑定的展示用值
get sliderValue(): number {
  return this._realValue === Infinity ? this.max : this._realValue;
}

set sliderValue(inputVal: number) {
  this._realValue = inputVal === this.max ? Infinity : inputVal;
  this.ngControl.control.patchValue(this._realValue);
}

HTML部分修改ngModel绑定即可，其他属性保持不变：

<input
  class="slider__input"
  type="range"
  [disabled]="disabled"
  [(ngModel)]="sliderValue"
  [max]="max"
  [min]="min"
  [step]="step"
/>

内容的提问来源于stack exchange，提问作者data.firstName