如何在Angular4中为range输入控件实现非线性取值？

这事儿我之前做类似功能时琢磨过，核心就是把滑块的线性位置和你要的非线性数值数组做映射，而不是直接用滑块的原生value。下面给你一步步拆解实现方法：

1. 调整滑块的基础属性 #

首先得把原生range滑块的参数改成适配数组索引的线性范围——毕竟滑块本身只能做线性滑动，我们要让它的每一步对应数组里的一个元素：

• min 设为 0（数组的起始索引）
• max 设为你的数值数组长度减1（比如你给的数组有9个元素，max就是8）
• step 设为 1（确保滑块每次只跳一个索引位置）

修改后的模板代码：

<input #sliderInput 
       id="slider" 
       [attr.min]="0" 
       [attr.max]="availableValues.length - 1" 
       [attr.step]="1" 
       type="range" 
       [(ngModel)]="selectedIndex" 
       (input)="onInputSlider()" 
       [attr.disabled]="slider.isDisabled ? '' : null" />

2. 在组件类里处理数值映射 #

首先定义你的可用数值数组，然后通过选中的索引来获取真实值，同时还要处理初始值的索引匹配：

// 组件类核心代码
availableValues = [3, 6, 9, 12, 15, 18, 24, 36, 48];
selectedIndex = 0; // 默认选中第一个元素

// 如果你原来的slider.value有初始值，先匹配对应的索引
// 比如：selectedIndex = this.availableValues.indexOf(this.slider.value);

// 通过getter获取当前选中的真实值
get selectedValue(): number {
  return this.availableValues[this.selectedIndex];
}

// 处理滑块滑动事件
onInputSlider() {
  // 把真实值同步回你原来的slider对象
  this.slider.value = this.selectedValue;
  // 这里可以保留你原来的业务逻辑...
}

3. 额外优化（可选） #

如果需要在页面上实时显示当前选中的真实值，直接绑定selectedValue即可：

<p>当前选中值：{{ selectedValue }}</p>

另外，为了避免初始值不在数组里的异常情况，可以在初始化时加个判断：

ngOnInit() {
  const initialIndex = this.availableValues.indexOf(this.slider.value);
  // 若初始值不在数组中，默认选中第一个元素
  this.selectedIndex = initialIndex !== -1 ? initialIndex : 0;
}

原理说明 #

原生range输入只能生成连续的线性数值，我们通过把滑块位置映射到数组索引的方式，间接实现了非线性取值的效果。用户滑动滑块时，本质是在切换数组的索引，最终拿到的就是你预设的非线性数值。

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