Используя Javascript, я пытаюсь создать сетку изображений, и я хотел бы встроить ползунок диапазона внизу одного из изображений. Чтобы получить сетку, я использую flex-container (ниже я просто показываю два числа, 1 и 2, в качестве примеров, но в реальном приложении они заменяются изображениями):
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: LightYellow;
}
.flex-item {
background-color: #f1f1f1;
width: 300px;
margin: 10px;
text-align: center;
line-height: 300px;
font-size: 30px;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item"> 2 </div>
</div>
</body>
Эта часть работает нормально - я получаю два изображения рядом, как я хочу:
Теперь предположим, что я хотел бы добавить слайд диапазона во второй div. Поэтому я добавляю это к своим стилям:
.slidecontainer {
flex: 0 1 auto;
order: 0;
position: relative;
align-items: center;
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
, а затем попытайтесь встроить ползунок в один из блоков flex-контейнера, скажем, второй:
<div class="flex-item"> 2
<div class="slidercontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
</div>
По причинам, которые я не понимаю, изображения взрываются. Вот как они выглядят сейчас:
Есть ли способ сохранить размеры изображений без изменений и просто добавить ползунок внизу одного из изображений в его div?
Спасибо!