如何用CSS/JS让滑块Thumb覆盖滑块Bar并在JS中引用Thumb？

一、让滑块Thumb位于边框上方并遮挡下方边框 #

修改你的CSS代码，给滑块thumb添加层级提升和位置调整，就能让它显示在边框上方并覆盖下方边框：

.slider
{
    -webkit-appearance: none;
    height: 12px;
    --pc: 0;
    --color: #000000;
    --bgcolor: transparent;
    --border: #000000;
    background: linear-gradient(to right, transparent 0 var(--pc), var(--bgcolor) var(--pc) 100%), var(--color);
    background-origin: content-box;
    outline: solid;
    outline-color: var(--border);
    border-radius: 10px;
    overflow: visible;
}

.slider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    outline: solid;
    outline-color: #000000;
    background: #CC1818;
    /* 添加以下属性 */
    position: relative;
    z-index: 1; /* 让thumb层级高于滑块边框 */
    margin-top: -4px; /* 垂直居中，同时覆盖下方边框 */
}

说明：

• position: relative + z-index: 1 确保thumb显示在滑块outline边框的上方；
• margin-top: -4px：滑块高度12px、thumb高度20px，偏移4px后thumb垂直居中，同时底部会覆盖滑块的下边框，让下方边框不可见。

二、在JavaScript中修改滑块Thumb的样式 #

::-webkit-slider-thumb是CSS伪元素，不属于DOM节点，无法直接通过JS获取修改。可以通过CSS变量或类切换间接控制它的样式：

方法1：用CSS变量动态修改 #

第一步：修改CSS，给thumb引入变量

.slider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    outline: solid;
    outline-color: var(--thumb-border, #000000); /* 用变量定义边框色 */
    background: var(--thumb-bg, #CC1818); /* 用变量定义背景色 */
    position: relative;
    z-index: 1;
    margin-top: -4px;
}

第二步：在JS中设置变量修改样式

// 修改thumb背景色
progressbar.style.setProperty('--thumb-bg', '#FFD700');
// 修改thumb边框色
progressbar.style.setProperty('--thumb-border', '#8B4513');

方法2：通过类切换修改样式 #

预先定义不同状态的thumb样式类，在JS中切换类名：

/* 定义一个大尺寸thumb的类 */
.slider.thumb-large::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -6px;
}

// 给滑块添加类，应用大尺寸thumb样式
progressbar.classList.add('thumb-large');
// 移除类，恢复原样式
progressbar.classList.remove('thumb-large');

内容的提问来源于stack exchange，提问作者Matteo La Malfa