Angular 10及以上版本range slider小数值设置失效问题咨询

问题现象 #

开发过程中使用range滑块时发现，Angular 10及以上版本中为滑块设置小数默认值无法正常生效，相同代码在纯HTML环境、Angular 9及更早版本中都能正常运行。

复现代码 #

app.component.html #

<input
  #slider3
  type="range"
  min="1.3"
  max="2.7"
  value="1.9"
  step="0.1"
/>
Result: {{ output}}

app.component.ts #

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('slider3', { read: ElementRef })
  public sliderOne: ElementRef;
  output;

  ngAfterViewInit(): void {
    console.log('..', this.sliderOne.nativeElement.value);
    this.output = this.sliderOne.nativeElement.value;
  }
} 

异常表现 #

预期输出结果应为1.9，实际在Angular 10+版本中得到的输出为2.3。

临时解决方案 #

• 移除input标签的value属性，直接通过this.sliderOne.nativeElement.value = '1.9'赋值
• 使用ngModel绑定值即可正常运行

根本原因 #

该问题是Angular 10版本迭代中对原生表单元素初始化逻辑调整导致的：

1. 调整了range类型input的属性绑定顺序：Angular9及更早版本会优先处理value属性，再处理min、max、step属性，此时value赋值不会触发原生的合法性校准；Angular10+改为先初始化min、max、step属性，最后赋值value，此时value设置会触发原生range输入框的自动校准逻辑。
2. 校准逻辑中的浮点数精度问题：原生range输入框以及Angular内部的校准逻辑，会将value调整为min + n * step格式的合法值，计算时因为小数运算的精度误差，导致1.9被错误校准为2.3。

内容的提问来源于stack exchange，提问作者Nasrul Bharathi