javascript - 如何使用 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 问题。
推荐阅读
- mongodb - mongo facet group 3 输出结果
- html - 用于下划线的 Material UI CSS 动画
- actionscript-3 - 使用动作脚本 3 检测颜色
- python - ![远程拒绝] master -> master (pre-receive hook denied) 错误:未能将一些参考推送到“https://git.heroku.com/stark-dawn-54447.git”
- haskell - Haskell 检查嵌套数据
- android - 在Pagedlist Android中加载更多页面时需要回调
- python - 使用 pyomo 并行解决许多实例
- amazon-web-services - 通过站点到站点 VPN 从本地连接到 AWS s3
- python - 如何从 python 脚本中的单个 bibtex 输入字段获取可读的 unicode 字符串
- gist - 在 Medium 上使用 Github Gists 嵌入代码不起作用