如何实现Slider滑块Thumb透明且忽略后方Track背景？

要实现透明边框的滑块 thumb 不显示下方的 track，同时保留动态背景的显示，可以通过 CSS Mask 配合 JS 动态计算位置来遮罩 track 上与 thumb 重叠的区域，或者拆分 track 为已选/未选区域并隐藏 thumb 下方的部分。以下是具体实现方法：

方法一：CSS Mask 遮罩 Track 重叠区域 #

这个方法通过遮罩将 track 上 thumb 所在的位置“挖空”，让透明 thumb 直接显示页面背景，而非下方的 track。

步骤1：基础 CSS 配置 #

$Primary: #你的主色调;
$thumb-size: 16px; // 定义thumb的尺寸

input[type=range] {
    appearance: none;
    background: $Primary;
    width: 100px;
    height: 2px;
    // 初始化变量
    --value: 50; // 默认值（0-100）
    --thumb-offset: calc(var(--thumb-size) / 2);
    // 计算thumb的位置：(滑块值百分比 * 滑块宽度) - thumb半宽
    --thumb-position: calc((var(--value) / 100) * 100px - var(--thumb-offset));
    
    // WebKit 遮罩配置
    -webkit-mask: 
        linear-gradient(transparent, transparent) no-repeat var(--thumb-position) center / var(--thumb-size) 100%,
        linear-gradient(black, black);
    -webkit-mask-composite: xor;
    
    // Firefox 遮罩配置
    mask: 
        linear-gradient(transparent, transparent) no-repeat var(--thumb-position) center / var(--thumb-size) 100%,
        linear-gradient(black, black);
    mask-composite: exclude;
}

// 垂直滑块适配
input[type=range][orient=vertical] {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 2px;
    height: 100px;
    // 调整垂直方向的位置计算
    --thumb-position: calc((1 - var(--value) / 100) * 100px - var(--thumb-offset));
    -webkit-mask: 
        linear-gradient(transparent, transparent) no-repeat center var(--thumb-position) / 100% var(--thumb-size),
        linear-gradient(black, black);
    mask: 
        linear-gradient(transparent, transparent) no-repeat center var(--thumb-position) / 100% var(--thumb-size),
        linear-gradient(black, black);
}

// Thumb 样式
input[type=range]::-webkit-slider-thumb {
    appearance: none;
    background: transparent;
    border: 2px solid $Primary;
    border-radius: 50%;
    width: $thumb-size;
    height: $thumb-size;
    transition: 0.1s;
    cursor: pointer;
}
input[type=range]::-webkit-slider-thumb:hover {
    background: $Primary;
}

input[type=range]::-moz-range-thumb {
    appearance: none;
    background: transparent;
    border: 2px solid $Primary;
    border-radius: 50%;
    width: $thumb-size;
    height: $thumb-size;
    transition: 0.1s;
    cursor: pointer;
}
input[type=range]::-moz-range-thumb:hover {
    background: $Primary;
}

步骤2：JS 动态更新位置 #

添加少量 JS 来实时计算滑块的值，更新 CSS 变量：

document.querySelectorAll('input[type=range]').forEach(slider => {
    // 初始化变量
    const updateThumbPosition = () => {
        const valuePercent = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
        slider.style.setProperty('--value', valuePercent);
    };
    
    // 页面加载时初始化
    updateThumbPosition();
    // 滑块拖动时更新
    slider.addEventListener('input', updateThumbPosition);
});

方法二：拆分 Track 为已选/未选区域 #

如果 mask 兼容性不佳，可以将 track 拆分为两部分，让 thumb 所在的位置没有 track 覆盖：

CSS 配置 #

$Primary: #你的主色调;
$thumb-size: 16px;

input[type=range] {
    appearance: none;
    // 用渐变实现已选/未选区域，未选区域透明
    background: linear-gradient(to right, $Primary 0%, $Primary var(--value), transparent var(--value), transparent 100%);
    width: 100px;
    height: 2px;
}

input[type=range][orient=vertical] {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 2px;
    height: 100px;
    background: linear-gradient(to top, $Primary 0%, $Primary var(--value), transparent var(--value), transparent 100%);
}

// Thumb 样式同方法一

JS 逻辑 #

和方法一的 JS 代码完全一致，通过--value变量控制渐变的分割位置。

说明 #

• 两种方法都能实现透明 thumb 直接显示页面动态背景，不会透出下方的 track；
• 方法一保留了完整的 track 视觉（除了 thumb 重叠区域），更贴合你的原始需求；
• 注意调整$thumb-size与你实际的 thumb 尺寸一致，确保遮罩区域完全覆盖 thumb 位置。

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