如何使用data-percent属性为滑块轨道设置线性渐变背景？

首先得明确：CSS的attr()函数目前无法直接在background这类属性的渐变值中生效，它仅对content等少数属性提供支持，所以直接写green attr(data-percent)是行不通的。下面给你两种纯原生的实现方案：

方法一：CSS自定义属性（变量）+ JavaScript #

这种方式既保留了data属性的灵活性，又能让CSS正确识别动态百分比：

1. 先修改CSS，用自定义变量替代硬编码的百分比：

.prettyRange {
  -webkit-appearance: none;
}
.prettyRange::-webkit-slider-runnable-track {
  /* 用自定义变量--percent接收动态值 */
  background: -webkit-linear-gradient(right, #fff 0%, green var(--percent), #fff 100%);
}

2. 用JavaScript读取data-percent属性的值，赋值给对应的CSS变量：

// 获取range元素
const range = document.querySelector('.prettyRange');
// 读取data-percent的值
const percent = range.dataset.percent;
// 将值绑定到CSS变量
range.style.setProperty('--percent', percent);

如果需要在滑块拖动时实时更新渐变效果，可监听input事件：

range.addEventListener('input', function() {
  // 假设滑块取值范围为0-100，直接将value转为百分比
  const currentPercent = `${this.value}%`;
  this.style.setProperty('--percent', currentPercent);
  // 可选：同步更新data-percent属性
  this.dataset.percent = currentPercent;
});

方法二：JavaScript直接动态设置background样式 #

如果不想依赖CSS变量，也可以直接通过JS生成渐变字符串并赋值给元素：

const range = document.querySelector('.prettyRange');
const percent = range.dataset.percent;
// 拼接渐变背景字符串
const gradient = `-webkit-linear-gradient(right, #fff 0%, green ${percent}, #fff 100%)`;
// 设置到滑块轨道
range.style.background = gradient;

同样，实现拖动实时更新的话，添加事件监听即可：

range.addEventListener('input', function() {
  const currentPercent = `${this.value}%`;
  const gradient = `-webkit-linear-gradient(right, #fff 0%, green ${currentPercent}, #fff 100%)`;
  this.style.background = gradient;
  this.dataset.percent = currentPercent;
});

小提示 #

你原来的渐变代码里#fff 0%重复出现了，最后一个色标应该改为100%，否则渐变无法正常显示哦。

内容的提问来源于stack exchange，提问作者Toni Michel Caubet