如何仅对box-shadow应用overflow:hidden？Range滑块样式问题求助

我在制作input range滑块组件时遇到了样式问题：原本通过给蓝色thumb添加box-shadow实现红色已选填充区域，但这个红色区域会超出滑块轨道的范围；如果给.range添加overflow:hidden，红色区域会被限制在轨道内，但蓝色thumb又会被裁切隐藏。想知道有没有办法只对box-shadow应用overflow:hidden，或者其他实现红色区域在轨道内且保留完整蓝色thumb的方法？

原代码如下：

body {
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #151515;
}
#rangeValue {
    position: relative;
    display: block;
    font-size: 6em;
    color: #999;
    font-weight: 400;
}
.range {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
    width: 400px;
    height: 5px;
    -webkit-appearance: none;
    background: #111;
    outline: none;
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: blue;
    cursor: pointer;
    box-shadow: -507px 0 0 500px red;
}

<div>
    <span id="rangeValue">0</span>
    <input class="range" type="range" name="" value="0" min="0" max="1000">
</div>

方案一：调整滑块内边距，用overflow:hidden裁切box-shadow但保留thumb #

核心思路是给滑块添加上下内边距，让overflow:hidden的裁切范围刚好容纳完整的thumb，同时限制box-shadow在轨道范围内。

修改.range的CSS样式：

.range {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
    width: 400px;
    height: 5px; /* 轨道本身高度 */
    padding: 5px 0; /* 上下内边距 = (thumb高度 - 轨道高度)/2 = (15-5)/2=5px */
    -webkit-appearance: none;
    background: #111;
    outline: none;
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    overflow: hidden; /* 开启裁切 */
}

原理：添加内边距后，滑块的内容盒高度变为5px + 5px*2 = 15px，刚好和thumb的高度一致，所以thumb不会被裁切；而box-shadow是基于thumb位置生成的红色区域，会被overflow:hidden限制在内容盒内，不会超出轨道范围。

方案二：用容器伪元素模拟填充区域（兼容性更好） #

如果需要兼容更多浏览器，或者不想依赖webkit的滑块样式，可以给滑块套一个外层容器，用伪元素实现已选区域的填充：

修改后的HTML： #

<div class="range-container">
    <span id="rangeValue">0</span>
    <input class="range" type="range" name="" value="0" min="0" max="1000">
</div>

修改后的CSS： #

body {
    display: flex; /* 补充原代码缺失的display:flex，否则垂直居中不生效 */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #151515;
}
#rangeValue {
    position: relative;
    display: block;
    font-size: 6em;
    color: #999;
    font-weight: 400;
}
.range-container {
    position: relative;
    width: 400px;
    height: 5px;
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    background: #111; /* 未选中轨道背景 */
    overflow: hidden;
}
.range-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--fill-width, 0%); /* 用CSS变量控制宽度 */
    background: red; /* 已选区域颜色 */
    border-radius: 15px;
}
.range {
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    background: transparent; /* 隐藏原生滑块背景 */
    outline: none;
    position: relative;
    z-index: 1; /* 让滑块在伪元素上方 */
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: blue;
    cursor: pointer;
    position: relative;
    z-index: 2; /* 确保thumb在最上层 */
}
/* 兼容Firefox */
.range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: blue;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 2;
}
.range::-moz-range-track {
    background: transparent;
}

补充JS代码（同步滑块值和填充宽度）： #

const range = document.querySelector('.range');
const rangeValue = document.getElementById('rangeValue');
const rangeContainer = document.querySelector('.range-container');

range.addEventListener('input', () => {
    const value = parseInt(range.value);
    const max = parseInt(range.max);
    const percentage = (value / max) * 100;
    rangeValue.textContent = value;
    rangeContainer.style.setProperty('--fill-width', `${percentage}%`);
});

// 初始化填充宽度
range.dispatchEvent(new Event('input'));

原理：用容器的伪元素作为已选区域的填充层，滑块本身设为透明，通过JS根据滑块的当前值计算填充宽度，这样填充区域天然被容器的overflow:hidden限制，thumb因为在更高的层级，不会被裁切，同时兼容性更好。

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