如何为不同浏览器的input type range元素实现自定义样式及跨端兼容

Chromium内核的Chrome、新Edge浏览器没有提供类似::-moz-range-progress/::-ms-fill-lower的原生伪类来直接区分滑块两侧轨道样式，可以通过背景渐变+CSS变量+少量JS的方式实现全浏览器一致的效果，改造后的代码如下：

CSS代码 #

input[type=range] {
  width: 100%;
  margin: 3px 0;
  background-color: transparent;
  -webkit-appearance: none;
  /* 新增：绑定进度变量，初始值50% */
  --value: 50%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  /* 修改：用渐变实现左右分色 */
  background: linear-gradient(to right, #0075b0 0%, #0075b0 var(--value), #F4F4F4 var(--value), #F4F4F4 100%);
  border: 0;
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 3px
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -8px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 5px solid #0075b0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 5px solid #0075b0;
  border-radius: 50%;
  cursor: pointer;
}
input[type=range]::-moz-range-track {
  background-color: #F4F4F4;
  border: 0;
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 3px
}
input[type="range"]::-moz-range-progress {
  background-color: #0075b0; 
  height: 6px;
  border-radius: 3px
}
input[type="range"]::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 3px solid #0075b0;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 0px;
  /* 保持Edge下滑块居中 */
}
input[type="range"]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 4px 0;
  color: transparent;
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 3px
}
input[type="range"]::-ms-fill-lower {
  background-color: #0075b0;
  border: 0;
  border-radius: 3px
}
input[type="range"]::-ms-fill-upper {
  background-color: #F4F4F4;
  border: 0;
  border-radius: 3px
}
input[type="range"]:focus::-ms-fill-lower {
  background-color: #0075b0;
  border-radius: 3px
}
input[type="range"]:focus::-ms-fill-upper {
  background-color: #F4F4F4;
  border-radius: 3px
}
@supports (-ms-ime-align:auto) {
  input[type=range] {
    margin: 0;
  }
}

HTML代码 #

可以直接在标签内绑定事件：

<input type="range" oninput="this.style.setProperty('--value', `${this.value}%`)">

如果需要批量处理多个滑动条，也可以使用外部JS统一绑定：

document.querySelectorAll('input[type="range"]').forEach(range => {
  // 初始化进度值
  range.style.setProperty('--value', `${range.value}%`)
  // 监听值变化更新进度
  range.addEventListener('input', () => {
    range.style.setProperty('--value', `${range.value}%`)
  })
})

该方案和你原有Firefox、IE的实现逻辑完全兼容，最终效果和设计稿一致。

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