JavaScript中如何将range滑块输入值映射为指定自定义数值

不需要修改range滑块的原生属性，只要在拿到滑块的原生返回值之后加一层映射转换，就能得到你要的自定义数值。
你当前的滑块值和目标值对应关系为：

• 滑块返回1 → 需要得到6
• 滑块返回2 → 需要得到12
• 滑块返回3 → 需要得到24
• 滑块返回4 → 需要得到36
• 滑块返回5 → 需要得到48
• 滑块返回6 → 需要得到60
  

方案1：映射表匹配（通用推荐） #

直接定义一个和滑块档位一一对应的映射数组，拿到原生值后直接查数组取对应结果即可，不依赖数值规律，后续调整档位对应值的时候只需要改数组内容，维护成本低。
修改后可直接运行的完整代码：

<div class="slidecontainer">
  <input type="range" min="1" max="6" steps="1" value="1" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
// 索引0留空，索引1-6依次对应当前滑块1-6档的目标返回值
const valueMap = [null, 6, 12, 24, 36, 48, 60]
// 初始化默认显示值
output.innerHTML = valueMap[slider.value];

slider.oninput = function() {
  const customVal = valueMap[this.value]
  output.innerHTML = customVal;
  // 后续业务逻辑直接使用customVal即可
}
</script>

方案2：公式计算（适配当前固定数值规律） #

你这组目标值除第一档外，其余档位符合 档位值 * 12 - 12 的计算规律，第一档单独做判断即可，不需要额外定义数组：

slider.oninput = function() {
  const rawVal = Number(this.value)
  const customVal = rawVal === 1 ? 6 : rawVal * 12 - 12
  output.innerHTML = customVal;
}

注意：原代码中<input type="range">的min属性前缺少空格，已经在上述代码中修正，避免属性解析异常。

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