Javascript 为当前滑动条实现一个简单的进度条

我正在努力弄清楚如何将这个进度条实现为一个可滚动的滑动条（）

我已经浏览了其他类似的相关帖子，但这似乎是一个稍微不同的解决方案，就我的一生而言，我不知道如何将两者结合起来。 谢谢你在这方面的帮助

$（文档）.ready（函数（）{
变量$slider=$（'.splide'）；
变量$progressBar=$（'.progress'）；
变量$progressBarLabel=$（'.slider__标签'）；
新Splide（“.Splide”{
每页：2.5，
perMove:1，
键入：“滑块”，
焦点：'中心'，
断点：{
767: {
每页:1，
}
}
}）。mount（）；
$（'.next splide'）。单击（函数（）{
$（'.splide_uuarrow.splide_uuarrow--next'）。单击（）；
});
$（'.prev splide'）。单击（函数（）{
$（'.splide_uuarrow.splide_uuarrow--prev'）。单击（）；
});
//进度条
$slider.on（'beforeChange'，函数（event，slick，currentSlide，nextSlide）{
var calc=（（下滑道）/（滑道滑动计数-1））*100；
$progressBar
.css（'background-size'，calc+'%100%”）
.attr（'aria-valuenow'，calc）；
$progressBarLabel.text（计算+'%completed'）；
});
});
.splide\uuuu arrow.splide\uuu arrow--next、.splide\uuuu arrow.splide\uuuu arrow--prev、.splide\uuu分页{
显示：无；
}
.splide*：焦点{大纲：无；}
/**
*进度条
*/
.进展{
显示：块；
宽度：100%；
高度：10px；
边界半径：10px；
溢出：隐藏；
背景色：#F5；
背景图像：线性渐变（向右，黑色，黑色）；
背景重复：无重复；
背景大小：0.100%；
过渡：背景尺寸。4s容易进出；
}
只有老先生{
位置：绝对位置；
宽度：1px；
高度：1px；
填充：0；
保证金：-1px；
溢出：隐藏；
剪辑：rect（0,0,0,0）；
边界：0；
}
/**主要CSS**/
.区段滑块{
位置：相对位置；
z指数：2；
溢出：隐藏；
最大宽度：1400px；
边缘顶部：15vh；
右边距：自动；
左边距：自动；
}
.splide-slider\u列表{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：开始；
-webkit内容：flex start；
-ms-flex-pack：启动；
调整内容：灵活启动；
-webkit框对齐：拉伸；
-webkit对齐项目：拉伸；
-ms-flex-align：拉伸；
对齐项目：拉伸；
}
.控制{
位置：相对位置；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
溢出：隐藏；
宽度：80px；
高度：140像素；
右边距：0.5em；
左边距：0.5em；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
背景色：#e9e9e9；
不透明度：0.66；
颜色：#0d0628；
}
.控制：激活{
-webkit变换：比例（0.9）；
-ms变换：标度（0.9）；
变换：比例（0.9）；
}
.控制填充{
位置：绝对位置；
左：自动；
最高：0%；
右：0%；
底部：自动；
z指数：1；
宽度：100%；
身高：100%；
利润率最高：-100%；
保证金权利：-100%；
边界半径：50%；
背景色：#0d0628；
}
.集装箱{
宽度：100%；
最大宽度：2000px；
右边距：自动；
左边距：自动；
填充：4.06em；
}
.container.is--slider{
填充顶部：0em；
填充底部：0em；
}
.控制箭头{
位置：相对位置；
显示：块；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.控制箭头已翻转{
-webkit变换：旋转（-180度）；
-ms变换：旋转（-180度）；
变换：旋转（-180度）；
}
.滑溜滑杆项目{
宽度：44%；
高度：自动；
右边距：16px；
-webkit-box-flex:0；
-webkit flex:0 0自动；
-ms-flex:0自动；
flex:0自动；
}
.section.is--slider{
位置：相对位置；
z指数：2；
}
.section.is--slider{
位置：相对位置；
z指数：2；
边缘顶部：15vh；
边缘底部：5em；
}
.滑动滑头控制{
位置：绝对位置；
左：自动；
最高：0%；
右：0%；
底部：0%；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：100%；
高度：140像素；
保证金：自动；
-webkit盒包：证明；
-webkit证明内容：之间的空间；
-ms-flex-pack:justify；
证明内容：之间的空间；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.滑盖式集装箱{
宽度：100%；
最大宽度：2000px；
}
.slick-slider_grid-col-1{
显示：-ms网格；
显示：网格；
网格自动列：1fr；
栅柱间隙：16px；
网格行间距：16px；
-ms网格柱：1fr；
网格模板列：1fr；
-ms网格行：最小最大值（自动，40vh）自动；
网格模板行：最小最大值（自动，40vh）自动；
}
.滑动滑盖_盒1{
位置：相对位置；
}
.silck-slider\u图像{
宽度：100%；
身高：100%；
-o-对象配合：盖；
对象匹配：覆盖；
}
.slick-slider_-step-text{
位置：绝对位置；
左：32px；
顶部：32px；
右：自动；
底部：自动；
字体系列：蒙特塞拉特，无衬线；
颜色：#fff；
字体大小：48px；
字体大小：400；
}
.页边距底部小{
边缘底部：16px；
}
.slick-slider_标题{
字体系列：蒙特塞拉特，无衬线；
颜色：#494949；
字号：18px；
字号：600；
}
.页面填充{
右边填充：32px；
左侧填充：32px；
}
.splide\u列表{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：开始；
-webkit内容：flex start；
-ms-flex-pack：启动；
调整内容：灵活启动；
-webkit框对齐：拉伸；
-webkit对齐项目：拉伸；
-ms-flex-align：拉伸；
对齐项目：拉伸；
}
.控制-2{
位置：相对位置；
显示：-webkit-