如何用CSS创建无滑块手柄的垂直范围滑块

问题分析 #

你当前的实现通过box-shadow模拟填充，但值为0时仍有残留显示，原因是阴影偏移量固定，未随滑块值动态调整。同时需要补充其他浏览器的兼容代码。

解决方案 #

以下是兼容Chrome、Firefox、Edge（含Legacy）的实现，同时支持值为0时滑块完全为空：

HTML 代码

<input type="range" id="vertical-slider" min="0" max="100" value="50" orient="vertical">

CSS 代码

/* 基础全局样式 */
#vertical-slider {
  margin: auto;
  height: 200px;
  width: 100px;
  border-radius: 0;
  --slider-height: 200px;
  --fill-primary: rgba(30, 143, 255, 0.532);
  --fill-secondary: rgba(30, 143, 255, 0.33);
}

/* Webkit 内核浏览器（Chrome、Safari、Chromium Edge） */
#vertical-slider[type="range"] {
  -webkit-appearance: slider-vertical;
  position: relative;
  overflow: hidden;
}

#vertical-slider::-webkit-slider-runnable-track {
  background: #fff;
}

#vertical-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  /* 动态计算阴影偏移：值为0时偏移0，无填充；值为100时偏移等于滑块高度，填满 */
  box-shadow: 0 calc(var(--value) * var(--slider-height) / 100) 0 var(--slider-height) var(--fill-primary),
              0 calc(var(--value) * var(--slider-height) / 100) 0 var(--slider-height) var(--fill-secondary);
}

/* Firefox 浏览器 */
#vertical-slider {
  appearance: none;
  orient: vertical;
}

#vertical-slider::-moz-range-track {
  background: #fff;
  height: 100%;
}

#vertical-slider::-moz-range-progress {
  background: var(--fill-primary);
}

#vertical-slider::-moz-range-thumb {
  appearance: none;
  width: 0;
  height: 0;
  border: none;
}

/* IE/Edge Legacy 浏览器 */
#vertical-slider::-ms-track {
  background: #fff;
  border: none;
  color: transparent;
  height: 100%;
}

#vertical-slider::-ms-fill-lower {
  background: var(--fill-primary);
}

#vertical-slider::-ms-fill-upper {
  background: #fff;
}

#vertical-slider::-ms-thumb {
  appearance: none;
  width: 0;
  height: 0;
}

#vertical-slider::-ms-tooltip {
  display: none; /* 隐藏默认提示框 */
}

JS 代码（同步滑块值到CSS变量）

const slider = document.getElementById('vertical-slider');

// 初始化变量值
slider.style.setProperty('--value', slider.value);

// 滑动时实时更新变量
slider.addEventListener('input', () => {
  slider.style.setProperty('--value', slider.value);
});

关键说明 #

1. Webkit 适配：通过CSS变量--value同步滑块当前值，动态计算box-shadow的垂直偏移量，值为0时偏移量为0，阴影被overflow:hidden隐藏，实现完全为空的效果。
2. Firefox 适配：利用原生的::-moz-range-progress元素实现填充，无需阴影技巧，仅需隐藏滑块手柄并设置orient="vertical"属性。
3. IE/Edge Legacy 适配：使用::-ms-fill-lower作为已填充区域，::-ms-fill-upper作为背景，同样隐藏手柄元素。
4. 无手柄效果：所有浏览器的滑块手柄均设置为width:0; height:0并移除默认样式，确保无手柄显示。

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