Javascript 堆叠进度条

所以我现在的进度条很棒，但我希望通过添加堆叠的进度条来改进它。这样做的目的是，当我点击一个选项时，它会将进度条移动一定量，我现在可以这样做。但我想让进度条变成这样：

好吧，没有人禁止您查看引导实现：


const[…barEls]=document.queryselectoral（`.progress>.progress bar`）；//集合到数组
函数更新进程（e）{
设值=e.target.value；
const maxVals=[33.33,33.33,33.33]；//元素的最大宽度值
for（设i=0；i最大值[i]）{
更新宽度（barEls[i]，maxVals[i]）；
值-=最大值[i]；
}否则{
updateElWidth（barEls[i]，值）；
barEls.slice（i+1）.forEach（bar=>updateElWidth（bar，0））；//清空其余的条
打破
}
}
函数更新宽度（el，宽度）{
el.style.width=`${width}%`；
}
}
const rangel=document.getElementById（`range`）；
forEach（event=>rangel.addEventListener（event，updateProgress））
。进度{
高度：1.5雷姆；
溢出：隐藏；
背景颜色：灰色；
边界半径：.25rem；
}
.进度条{
显示：内联块；
身高：100%；
}
.bg弱{
背景色：#d9534f；
}
好的{
背景色：#f0ad4e！重要；
}
.bg strong{
背景色：#5cb85c！重要；
}