CSS伪元素+变量实现范围滑块的宽度溢出、进度越界问题

我仅使用单个div搭配::pseudo伪元素实现了一个范围滑块，由于无法通过JavaScript直接访问伪元素，我借助CSS变量实现进度控制，但开发过程中遇到了几个无法解决的问题。

设置max-width的版本 #

const range = document.querySelector(".range");

function setRange(event) {
  const rect = range.getBoundingClientRect();

  range.style.setProperty(
    "--progress",
    `${(event.clientX / rect.width) * 100}%`
  );
}

range.addEventListener("pointerdown", (event) => {
  range.classList.add("active");
  range.setPointerCapture(event.pointerId);
  setRange(event);

  range.addEventListener("pointermove", setRange);

  range.addEventListener(
    "pointerup",
    (event) => {
      range.classList.remove("active");
      range.releasePointerCapture(event.pointerId);
      range.removeEventListener("pointermove", setRange);
    }, {
      once: true
    }
  );
});

@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
  height: 100%;
  display: grid;
  place-items: center;
}

.range {
  width: 100%;
  cursor: pointer;
  height: 0.25rem;
  max-width: 450px;
  border-radius: 60rem;
  background-color: rgba(120, 120, 128, 0.2);
}

.range::before,
.range::after {
  content: "";
  position: absolute;
}

.range::before {
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background-color: #007aff;
}

.range::after {
  top: 50%;
  cursor: grab;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  aspect-ratio: 1/1;
  left: var(--progress);
  background-color: white;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
}

.range.active {
  cursor: grabbing;
}

<div class="range"></div>

未设置max-width的版本 #

const range = document.querySelector(".range");

function setRange(event) {
  const rect = range.getBoundingClientRect();

  range.style.setProperty(
    "--progress",
    `${(event.clientX / rect.width) * 100}%`
  );
}

range.addEventListener("pointerdown", (event) => {
  range.classList.add("active");
  range.setPointerCapture(event.pointerId);
  setRange(event);

  range.addEventListener("pointermove", setRange);

  range.addEventListener(
    "pointerup",
    (event) => {
      range.classList.remove("active");
      range.releasePointerCapture(event.pointerId);
      range.removeEventListener("pointermove", setRange);
    }, {
      once: true
    }
  );
});

@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
  height: 100%;
  display: grid;
  place-items: center;
}

.range {
  width: 100%;
  cursor: pointer;
  height: 0.25rem;
  border-radius: 60rem;
  background-color: rgba(120, 120, 128, 0.2);
}

.range::before,
.range::after {
  content: "";
  position: absolute;
}

.range::before {
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background-color: #007aff;
}

.range::after {
  top: 50%;
  cursor: grab;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  aspect-ratio: 1/1;
  left: var(--progress);
  background-color: white;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
}

.range.active {
  cursor: grabbing;
}

<div class="range"></div>

我的尝试思路 #

我最初的想法是在setRange()函数内添加if判断条件：

function setRange(event) {
  const rect = range.getBoundingClientRect();

  if (
    !(window.getComputedStyle(range).getPropertyValue("--progress") > "100%")
  ) {
    range.style.setProperty(
      "--progress",
      `${(event.clientX / rect.width) * 100}%`
    );
  }
}

但上述代码在首次pointerdown后就无法正常工作，尽管我通过console.log打印判断条件时，逻辑表现完全正常。

我还尝试了如下写法：

if (!(parseFloat(window.getComputedStyle(range).getPropertyValue('--progress')) > 100)) {
  range.style.setProperty('--progress', `${(event.clientX / rect.width) * 100}%`)
}

但这个版本同样存在问题：当进度到达100%后，我无法再将滑块往回拖动到100%以下的位置，简单来说滑块到达最大值后就锁死无法移动了。

核心疑问 #

1. 为什么给滑块设置max-width后，范围滑块无法按照预期工作？
2. 为什么我在setRange()中编写的if判断在console.log()调试时逻辑正常，但实际操作DOM时无法生效？
3. 如何为var(--progress)设置最大值，让进度值永远不会超过100%？

问题解答 #

1. 设置max-width后滑块异常的原因 #

• 计算进度的逻辑错误：直接用event.clientX / rect.width计算比例，但clientX是鼠标相对于视口左边缘的坐标，不是相对于滑块元素左边缘的偏移量。当滑块有max-width且居中时，滑块左边缘和视口左边缘存在间距，直接用clientX计算会导致初始点击时进度值就偏大，拖动时很快超过100%。
• 伪元素定位基准错误：给::before和::after设置了position: absolute，但没有给父元素.range设置position: relative，伪元素会默认相对于最近的非static定位祖先（即body）定位，而不是相对于滑块轨道定位，有max-width时轨道宽度不是100%视口宽度，定位偏移完全错位。

2. 自定义if判断失效的原因 #

• 第一个判断版本直接比较带%的字符串，字符串比较是按字符逐位对比的，比如"99%" > "100%"会返回true（因为第一个字符9比1大），比较逻辑完全不符合数值预期。
• 第二个数值判断版本是单向拦截逻辑：只要当前进度超过100%，就直接阻止所有后续的--progress更新，不管鼠标是往右拖还是往左拖，所以到100%之后就直接锁死，不会响应往回拖动的操作。

3. 正确限制进度值范围的方案 #

不需要读取CSS变量做判断，直接在计算进度值的时候就把数值钳制在0-100之间即可，同时修正坐标计算和定位问题：

• 给.range添加position: relative，让伪元素相对于滑块轨道定位
• 计算进度时，用event.clientX - rect.left得到鼠标在滑块内部的横向偏移量，再除以轨道宽度得到比例
• 用Math.max(0, Math.min(100, 计算出的百分比))把值限制在0到100区间内，从根源上避免超出范围

修正后的核心setRange代码：

function setRange(event) {
  const rect = range.getBoundingClientRect();
  // 计算鼠标在滑块内的偏移量，钳制值在0-100之间
  const offsetX = event.clientX - rect.left;
  const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100));
  range.style.setProperty("--progress", `${percent}%`);
}

对应CSS只需要给.range补一行position: relative;即可，不管加不加max-width都能正常工作。

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