如何让HTML滑动条(input type range)松手后回弹并显示初始值

直接在onchange事件回调中给range元素的value属性赋值为预设的初始值即可，你之前只更新了文本展示的内容，没有同步修改滑动条元素本身的当前值，所以滑块位置不会自动回弹。

你需要把onchange回调的代码修改为如下内容：

element.onchange = function() {
  // 你可以先在这里编写发送当前滑动值的逻辑
  // 比如 sendData(this.value)

  // 同步滑动条位置回初始值
  this.value = this.defaultValue;
  // 同步展示文本
  valueDiv.innerHTML = this.defaultValue;
}

补充说明 #

• 如果你需要更真实的操纵杆回弹动画效果，可以给range元素加CSS过渡：

  input[type="range"] {
    transition: all 0.2s ease;
  }
  

  加完之后滑块回弹会有平滑的过渡效果，不会直接跳回初始位置，更贴近实体操纵杆的使用体验。

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