能否为input range的value值添加CSS transition实现平滑移动？

直接给<input type="range">的value属性加CSS transition是没用的——因为transition只对CSS属性生效，而value是HTML元素的属性，不在可过渡的CSS属性范围内。

下面给两种可行的实现方式：

方式一：CSS变量+自定义滑块样式（推荐，原生流畅） #

通过自定义滑块外观，用CSS变量控制滑块位置，再配合transition实现平滑移动：

HTML代码 #

<input type="range" id="a" value="0" step="1" min="0" max="100">
<a href="#" onclick="test();return false;">test</a>

CSS代码 #

#a {
  /* 隐藏原生滑块样式，自定义基础轨道 */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  outline: none;
}

/* WebKit内核（Chrome、Safari等）的自定义滑块 */
#a::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #2196F3;
  border-radius: 50%;
  cursor: pointer;
  /* 用CSS变量计算滑块偏移，实现位置控制 */
  transform: translateX(calc(var(--value, 0) * 1% - 50%));
  transition: transform 0.5s ease;
}

/* Firefox内核的自定义滑块 */
#a::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #2196F3;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  /* Firefox用margin-left控制位置 */
  margin-left: calc(var(--value, 0) * 1% - 10px);
  transition: margin-left 0.5s ease;
}

JavaScript代码 #

function test() {
  const slider = document.querySelector('#a');
  // 设置CSS变量为目标值，触发过渡
  slider.style.setProperty('--value', 70);
  // 过渡完成后同步input的value，保证表单数据正确
  setTimeout(() => {
    slider.value = 70;
  }, 500);
}

// 手动拖动滑块时，同步CSS变量值
document.querySelector('#a').addEventListener('input', function() {
  this.style.setProperty('--value', this.value);
});

方式二：JavaScript逐步修改value（简单无需改样式） #

通过定时器快速连续修改value值，模拟平滑过渡效果：

修改后的JavaScript代码 #

function test() {
  const slider = document.querySelector('#a');
  const target = 70;
  const current = parseInt(slider.value);
  const step = target > current ? 1 : -1;
  const totalSteps = Math.abs(target - current);
  const duration = 500; // 过渡总时长（毫秒）
  const interval = duration / totalSteps;

  const timer = setInterval(() => {
    slider.value = parseInt(slider.value) + step;
    if (parseInt(slider.value) === target) {
      clearInterval(timer);
    }
  }, interval);
}

这个方式不需要修改CSS，直接用JS逐步逼近目标值，但流畅度略逊于CSS原生过渡。

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