如何根据数值调整Range滑块左侧填充高度？

要实现拖动滑块时左侧高度随数值增大上升的填充效果，可以通过新增填充元素+JS动态计算百分比来实现，以下是具体方案：

实现思路 #

1. 在滑块容器内添加一个用于展示填充效果的元素，通过绝对定位让它贴合滑块轨道的左侧。
2. 利用滑块的input事件实时获取当前值，计算其相对于最大值的百分比。
3. 根据百分比动态设置填充元素的宽度（覆盖滑块左侧区域）和高度（从0到目标高度渐变）。

修改后的完整代码 #

HTML #

<div class="range-container">
  <input type="range" name="range" id="range" min="0" max="100" value="0" />
  <div class="range-fill"></div>
  <label for="range">DRAG</label>
</div>

CSS #

:root {
  --theme-col: #ccc; /* 基础轨道颜色 */
  --fill-col: blue; /* 填充颜色 */
  --max-fill-height: 20px; /* 填充最大高度 */
}

.range-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 80%;
  margin: 90px auto;
}

#range {
  width: 100%;
  -webkit-appearance: none;
  background: transparent; /* 隐藏原生轨道背景，让填充元素显示 */
}

#range:focus {
  outline: none;
}

/* 原生轨道样式 */
#range::-webkit-slider-runnable-track {
  background: var(--theme-col);
  width: 100%;
  height: 3px;
  cursor: pointer;
}

/* 滑块手柄样式 */
#range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: blue;
  border-radius: 50%;
  border: 1px solid blue;
  margin-top: -4px;
  cursor: pointer;
  position: relative;
  z-index: 2; /* 确保手柄在填充元素上方 */
}

/* 填充效果元素 */
.range-fill {
  position: absolute;
  left: 0;
  bottom: 50%;
  transform: translateY(50%);
  height: 0;
  width: 0;
  background: var(--fill-col);
  border-radius: 2px;
  z-index: 1;
  transition: height 0.1s ease, width 0.1s ease; /* 平滑过渡效果 */
}

JavaScript #

const range = document.getElementById('range');
const fill = document.querySelector('.range-fill');
const maxHeight = getComputedStyle(document.documentElement).getPropertyValue('--max-fill-height');

// 初始化填充状态
updateFill(range.value);

// 监听滑块拖动事件
range.addEventListener('input', function() {
  updateFill(this.value);
});

// 更新填充元素的宽度和高度
function updateFill(value) {
  const percentage = (value / range.max) * 100;
  fill.style.width = `${percentage}%`;
  fill.style.height = `${(percentage / 100) * parseInt(maxHeight)}px`;
}

关键细节说明 #

• 填充元素通过position: absolute定位在滑块轨道的左侧，z-index设置为1，确保它在手柄下方。
• 使用CSS变量统一管理颜色和最大高度，方便后续调整样式。
• JS中通过计算当前值的百分比，同步设置填充元素的宽度（覆盖滑块左侧对应比例区域）和高度（按比例从0增长到最大高度）。
• 添加transition实现平滑的填充动画效果。

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