I am currently using Javascript to generate a grid of images, and I want to include a range slider at the bottom of one of the images. Here is a simplified version of my code using flex-container:
<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>
The grid layout with two images side by side works as intended:
https://i.sstatic.net/dWdcx.png
Now, I am trying to add a range slider to the second image. I have defined the styles for the slider container and slider elements:
.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;
}
I then try to embed the range slider in the second div of the flex-container:
<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>
Unfortunately, this causes sizing issues with the images. Here is how it looks now:
https://i.sstatic.net/lQODD.png
Is there any way to maintain the dimensions of the images while adding the slider at the bottom of one of them within its div?
Thank you!