#javascript #html #slider
Вопрос:
Я хочу показать процентное число над ползунком, как показано на рисунке ниже, но я не хочу, чтобы с ним работали какие-либо библиотеки 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>
Ответ №1:
вы можете создать div с помощью flexbox layour (пространство между ними поможет вам) — внутри этого div добавьте свои 4 маленьких пузырька (divs) (радиус границы: 50% — для обведения divs).
не забудьте указать z-индекс над вашим вводом.
кстати, это не вопрос реакции — это скорее вопрос css.