问题描述
我想在滑块上方显示一个百分比数字,如下图所示,但我不想使用任何 jQuery 或其他 js 库。我有一些块,我应该在我写的块中添加什么。如何实现预期输出中的滑块?
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.middle {
width: 50%;
max-width: 500px;
}
.slider-container {
position: relative;
}
/* .slider-container .bar {
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 7px;
borer-radius: 5px;
background-color: red;
} */
.slider-container .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
margin: 0;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
background-color: #1D2A78;
}
.slider-container .slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
background-color:#1D2A78;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
transform: rotate(135deg);
}
<div class="middle">
<div class="slider-container">
<span class="bar"><span class="fill"></span></span>
<input type="range" id="slider" class="slider" min=0 max=100 value=50>
</div>
</div>
解决方法
您可以使用 flexbox 布局创建一个 div(之间的空间将帮助您) - 在该 div 内添加您的 4 个小气泡(div),(边框半径:50% - 用于环绕 div)。
记得把 z-index 放在你的输入之上。
顺便说一句,这不是一个反应问题 - 它更像是一个 css 问题。