Javascript 如何使用react.js创建包含多个气泡的范围滑块？

我想在滑块上方显示一个百分比，如下图所示，但我不想使用任何jQuery或其他js库。我有一些块，我应该在我写的块中添加什么。如何实现滑块的预期输出

正文{
保证金：0；
填充：0；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：白色；
}
.中{
宽度：50%；
最大宽度：500px；
}
.滑块容器{
位置：相对位置；
}
/*.slider容器.bar{
位置：绝对位置；
z指数：-1；
左：0；
右：0；
顶部：7px；
钻孔半径：5px；
背景色：红色；
} */
.滑块容器.滑块{
位置：相对位置；
z指数：2；
-webkit外观：无；
保证金：0；
宽度：100%；
高度：10px；
边界半径：5px；
大纲：无；
背景色：#1D2A78；
}
.slider容器。slider:：-webkit slider thumb{
-webkit外观：无；
高度：20px；
宽度：20px；
背景色：#1D2A78；
边界左上半径：50%；
边界右上角半径：50%；
边框右下半径：50%；
边框左下半径：0；
变换：旋转（135度）；
}

---

您可以使用flexbox layour创建一个div（间距将帮助您）-在该div内添加4个小气泡（div），（边界半径：50%-用于旋转div）

请记住将z索引置于输入上方

顺便说一句，这不是一个反应问题，而是一个css问题