Html 将文本放置在范围滑块内

我是CSS新手，有一个问题很容易回答，尽管我不确定从哪个类开始

我的目标是将文本整齐地放在范围滑块内 我使用的是公共范围滑块示例：

let app=（（）=>{
函数更新滑动器（元素）{
if（元素）{
让parent=element.parentElement，
lastValue=parent.getAttribute（'data-slider-value'）；
if（lastValue==element.value）{
return；//无值更改，无需更新
}
parent.setAttribute（'data-slider-value'，element.value）；
设$thumb=parent.querySelector（'.range-slider\uuu thumb'），
$bar=parent.querySelector（'.range-slider\uu bar'），
pct=element.value*（（parent.clientHeight-$thumb.clientHeight）/parent.clientHeight）；
$thumb.style.bottom=`${pct}%`；
$bar.style.height=`calc（${pct}%+${$thumb.clientHeight/2}px）`；
$thumb.textContent=`${element.value}%`；
}
}
返回{
updateSlider:updateSlider}；
})();
（函数初始化和设置滑块（）{
const inputs=[].slice.call（document.queryselectoral（'.range slider input'））；
input.forEach（input=>input.setAttribute（'value'，'50'）；
inputs.forEach（input=>app.updateSlider（input））；
//跨浏览器支持在拖动控制柄时值立即更改，因此有两种事件类型。
input.forEach（input=>input.addEventListener（'input'，element=>app.updateSlider（input））；
inputs.forEach（input=>input.addEventListener（'change'，element=>app.updateSlider（input））；
})();
。范围滑块{
位置：相对位置；
文本对齐：居中；
高度：300px；
最大高度：100%；
利润率最高：15%；
/*边缘底部：5vh*/
}
/*.范围滑块：之前{
位置：绝对位置；
顶部：-2米；
//左：.5em；
内容：attr（数据滑块值）“%”；
颜色：红色；
字体大小：25px；
}*/
.范围滑块{
位置：绝对位置；
左：32%；
宽度：45px；
高度：45px；
线高：45px；
字体大小：粗体；
背景：白色；
颜色：黑色；
背景：url（'../../../assets/images/button_round_dark.png'）；
字号：80%；
盒影：0px 4px 15px rgba（0,0,0,0.9）；
边界半径：50%；
指针事件：无；
z指数：999；
//位置：绝对位置；
//左：42%；
//宽度：30px；
//高度：30px；
//线高：30px；
//背景：白色；
//颜色：黑色；
//字体大小：50%；
//字号：80%；
//盒影：0px 4px 15px rgba（0,0,0,0.9）；
//边界半径：50%；
//指针事件：无；
//z指数：999；
}
.范围滑块\拇指\开始{
位置：绝对位置；
左：33%；
宽度：45px；
高度：45px；
线高：30px；
背景：白色；
颜色：黑色；
背景：url（'../../../assets/images/button_round_dark.png'）；
字体大小：60%；
盒影：0px 4px 15px rgba（0,0,0,0.9）；
边界半径：50%；
指针事件：无；
z指数：99；
底部：0px；
}
.范围滑块{
左：42%；
底部：0；
位置：绝对位置；
背景：线性梯度（至底部，#c00000 0%，#200 100%）；
指针事件：无；
宽度：20px；
边界半径：10px；
}
.范围滑块输入[类型=范围][方向=垂直]{
位置：相对位置；
保证金：0；
身高：100%；
宽度：100%；
显示：内联块；
位置：相对位置；
写入方式：bt-lr；
-webkit外观：滑块垂直；
}
.range滑块输入[type=range][orient=vertical]：：-webkit滑块可运行轨迹.range滑块输入[type=range][orient=vertical]：-webkit滑块拇指{
-webkit外观：无；
}
.range滑块输入[type=range][orient=vertical]：-webkit滑块可运行轨迹{
边界：无；
背景：橙色；
宽度：18px；
边框颜色：#B94F1B；
边界半径：10px；
//盒影：0.20px rgba（96,96,96,0.1）；
//-网络工具包盒阴影：5px 38px 0px 53px rgba（0,0,0,0.35）；
//-moz盒阴影：5px38px0px53pxrgba（0,0,0,0.35）；
盒影：0px20px40pxrgba（96,96,96,0.1）；
}
.范围滑块输入[类型=范围][方向=垂直]：-moz范围轨迹{
边界：无；
背景：白色；
宽度：18px；
边框颜色：#343440；
边界半径：10px；
//盒影：0 0 2px#3d4a；
}
.range滑块输入[类型=范围][方向=垂直]：-ms轨迹{
边界：无；
背景：白色；
宽度：18px；
边框颜色：#343440；
边界半径：10px；
盒影：0 0 2px#3d4a；
颜色：透明；
身高：100%；
}
.range滑块输入[type=range][orient=vertical]：：-ms填充下限，.range滑块输入[type=range][orient=vertical]：-ms填充上限，.range滑块输入[type=range][orient=vertical]：-ms工具提示{
显示：无；
}
.range滑块输入[type=range][orient=vertical]：-webkit滑块拇指{
宽度：30px；
高度：30px；
不透明度：0；
}
.range滑块输入[type=range][orient=vertical]：-moz range thumb{
宽度：30px；
高度：30px；
不透明度：0；
}
.range滑块输入[类型=范围][方向=垂直]：-ms thumb{
宽度：30px；
高度：30px；
不透明度：0；
}
.范围滑块文本{
字号：1rem；
颜色：红色；
文本转换：大写；
字母间距：3px；
位置：绝对位置；
底部：0；
左：0；
左边距：-30px；
-webkit变换：旋转（270度）；
-moz变换：旋转（270度）；
-ms变换：旋转（270度）；
-o变换：旋转（270度）；
变换：旋转（270度）；
-webkit转换原点：0；
-moz变换原点：0；
-ms变换原点：0；
-o变换原点：0；
变换原点：0；
}

标题二
幻灯片提供您的反馈
我只是用一些CSS和HTML更改来更新您的代码，希望它能帮助您。谢谢

添加
显示：flex，
调整内容：中心和
对齐项目：居中
CSS在
.range-slider\uu栏中

.range-slider__bar {
  left: 42%;
  bottom: 0;
  position: absolute;
  background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
  pointer-events: none;
  width: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

另外，添加
滑块文本
css

.slider-text {
    transform: rotate(-90deg);
    white-space: nowrap;
}

在HTML中，我只需添加
My De