Идея делать картинки фоном, но с помощью трех пустых блоков в обертке - далеко не лучшая - дает только мусор в разметке.
<div id="myProgress">
<div id="myBar"></div>
<span>10%</span>
</div>#myProgress {
position: relative;
width: 100%;
height: 20px;
background-color: #cecaca;
}
#myBar {
width: 10%;
height: 20px;
background-color: #04AA6D;
}
#myProgress span {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
color: white;
}<div id="myProgress" data-progress="10%">
<div id="myBar"></div>
</div>#myProgress {
position: relative;
width: 100%;
height: 20px;
background-color: #cecaca;
}
#myBar {
width: 10%;
height: 20px;
background-color: #04AA6D;
}
#myProgress::after {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
z-index: 2;
content: attr(data-progress);
display: flex;
justify-content: center;
align-items: center;
color: white;
}...блок должен быть создан при помощи Bootstrap...
let mediaQuery = window.matchMedia('(min-width: 500px)')
if (mediaQuery.matches) {
// я выполнюсь только если ширина экрана 500px или больше
}<input type="range">
Если правильно понял:
Блок будет занимать доступную ширину (т. е. его можно сжимать по ширине), но не растянется больше 600px.