如何解决如何使用 react.js 创建一个带有多个气泡的范围滑块?
我想在滑块上方显示一个百分比数字,如下图所示,但我不想使用任何 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 问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。