如何创建带三色分段且滑动时自动填充的Range Slider？

我想要创建一个带有三段不同颜色分段的Range Slider，目前仅能修改滑块的单一颜色，无法实现三色分段效果。以下是我用Tailwind编写的CSS代码：

input[type='range'] {
        @apply w-full h-8 outline-none appearance-none rounded-3xl;
        background: linear-gradient(90deg, #7549ea 50%, #e7e4f2 50%);
    }

    input[type='range']::-webkit-slider-thumb {
        @apply w-8 h-8 -mt-[.65rem] rounded-full appearance-none cursor-pointer bg-secondary-dark;
    }

    input[type='range']::-webkit-slider-runnable-track {
        @apply h-2.5 appearance-none text-green mt-[-1px];
    }

    input[type='range']::-moz-range-thumb {
        @apply w-8 h-8 rounded-full appearance-none cursor-pointer bg-secondary-dark;
    }

    input[type='range']::-moz-range-progress {
        @apply bg-primary;
    }

    input[type='range']::-ms-thumb {
        @apply mt-0;
    }

    input[type='range']::-ms-fill-lower {
        @apply bg-primary;
    }

    input[type='range'].slider-sm {
        @apply w-full h-[1.5625rem] outline-none appearance-none rounded-3xl;
    }

    input[type='range'].slider-sm::-webkit-slider-thumb {
        @apply w-[1.5625rem] h-[1.5625rem] -mt-[.45rem] rounded-full appearance-none cursor-pointer bg-secondary-dark;
    }

    input[type='range']::-moz-range-thumb {
        @apply w-[1.5625rem] h-[1.5625rem] rounded-full appearance-none cursor-pointer bg-secondary-dark;
    }

原生Range Slider不支持直接设置多色分段，需结合CSS背景渐变+JavaScript动态计算实现，同时兼容不同浏览器的伪元素差异：

1. 结构调整：用容器包裹滑块 #

给滑块添加父容器，用于承载三段渐变背景：

<div class="range-slider-container relative w-full">
  <input type="range" min="0" max="100" value="50" class="range-slider w-full h-8 outline-none appearance-none rounded-3xl bg-transparent">
</div>

2. CSS样式编写（兼容多浏览器） #

/* 父容器：承载三段渐变背景 */
.range-slider-container {
  @apply relative w-full h-8 flex items-center rounded-3xl overflow-hidden;
  /* 自定义三段颜色比例，可根据需求修改百分比 */
  background: linear-gradient(90deg, #2ecc71 0% 33%, #f39c12 33% 66%, #e74c3c 66% 100%);
}

/* 滑块基础样式 */
.range-slider {
  @apply w-full h-8 outline-none appearance-none bg-transparent relative z-10;
}

/* WebKit内核（Chrome/Safari） */
.range-slider::-webkit-slider-runnable-track {
  @apply appearance-none h-2.5 rounded-full bg-transparent; /* 隐藏原生轨道，用容器背景替代 */
}

.range-slider::-webkit-slider-thumb {
  @apply w-8 h-8 -mt-[0.65rem] rounded-full appearance-none cursor-pointer bg-secondary-dark z-20;
}

/* Firefox */
.range-slider::-moz-range-track {
  @apply appearance-none h-2.5 rounded-full bg-transparent; /* 隐藏原生轨道 */
}

.range-slider::-moz-range-progress {
  @apply appearance-none h-2.5 rounded-full bg-transparent; /* 隐藏默认进度条 */
}

.range-slider::-moz-range-thumb {
  @apply w-8 h-8 rounded-full appearance-none cursor-pointer bg-secondary-dark;
}

/* Edge/IE（可选兼容） */
.range-slider::-ms-track {
  @apply appearance-none h-2.5 rounded-full bg-transparent border-none;
}

.range-slider::-ms-fill-lower, .range-slider::-ms-fill-upper {
  @apply appearance-none rounded-full bg-transparent;
}

.range-slider::-ms-thumb {
  @apply w-8 h-8 rounded-full appearance-none cursor-pointer bg-secondary-dark mt-0;
}

/* 小尺寸滑块样式 */
.range-slider.slider-sm {
  @apply h-[1.5625rem];
}

.range-slider.slider-sm::-webkit-slider-thumb {
  @apply w-[1.5625rem] h-[1.5625rem] -mt-[0.45rem];
}

.range-slider.slider-sm::-moz-range-thumb {
  @apply w-[1.5625rem] h-[1.5625rem];
}

3. JavaScript动态调整滑块显示区域 #

通过clipPath控制容器背景的显示范围，实现滑块移动时左侧分段颜色的动态变化：

document.querySelectorAll('.range-slider').forEach(slider => {
  const container = slider.parentElement;
  
  const updateSliderClip = () => {
    // 计算滑块当前位置占总长度的比例
    const value = (slider.value - slider.min) / (slider.max - slider.min);
    // 裁剪容器背景，只显示滑块左侧区域
    container.style.clipPath = `inset(0 ${100 - (value * 100)}% 0 0)`;
  };
  
  // 滑块移动时更新裁剪区域
  slider.addEventListener('input', updateSliderClip);
  // 初始化时执行一次，确保显示正确
  updateSliderClip();
});

关键说明 #

• 三段颜色的分界比例可通过渐变中的百分比调整（如将33%/66%改为对应滑块刻度的百分比，比如滑块刻度30对应30%）。
• 利用容器背景+裁剪实现多色分段，避免了原生滑块伪元素仅支持单一颜色的限制。

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