How to put label above range slider - html

Question

How can I put label "bright" above the range slide, now it's above but not directly above slider. I tried to use label but it didnt't work............................................................................
.popup-btn {
display: flex;
justify-content: left;
}
.panel {
text-align: center;
width: 335px;
height: 150px;
padding: 7px;
margin: 5px;
border: 6px solid gray;
float: left;
border-radius: 5px;
background-color: rgb(53, 96, 99);
opacity: 0.9;
font-size: 24px;
}
button {
background-color: rgb(241, 232, 232);
/* Green */
border: 3px solid gray;
color: white;
width: 85px;
height: 45px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 22px;
border-radius: 5px;
color: black;
font-family: 'Gemunu Libre', sans-serif;
margin-top: 15px;
margin-right: 5px;
}
<div id="panel-led" class="panel">
<img src="swiatlo.jpg" class="obrazki"> LED: <span id="wartosc-led">[stanled]</span>
<br/>
<button id="przycisk-led" style="margin-left: -8%;"></button>
<button id="przycisk-led1"></button>
</br>
<div class="popup-btn">
<button style="margin-left: auto;margin-right: auto;width: 50%;" onclick="show_schedule()">Schedule</button>
<span style="font-size: 12px;">bright</span>
<input style="width: 20%;" type="range" id="rangeinput" min="0" max="255" value="122" onchange="rangevalue.value=value" />
</div>
</div>

Answer 1

You can use flex in CSS:
Wrap a div around the label and the range slider.
Set the display property value of div to flex.
Set flex-direction property to column
For label you should define a name attribute of range slider and use that name in the label as <label for="some-name">Text</label>
Hope it helps.
.popup-btn {
display: flex;
justify-content: left;
}
.panel {
text-align: center;
width: 335px;
height: 150px;
padding: 7px;
margin: 5px;
border: 6px solid gray;
float: left;
border-radius: 5px;
background-color: rgb(53, 96, 99);
opacity: 0.9;
font-size: 24px;
}
button {
background-color: rgb(241, 232, 232);
/* Green */
border: 3px solid gray;
color: white;
width: 85px;
height: 45px;
/*text-align: center;*/
text-decoration: none;
display: inline-block;
font-size: 22px;
border-radius: 5px;
color: black;
font-family: 'Gemunu Libre', sans-serif;
margin-top: 15px;
margin-right: 5px;
}
#przycisk-led {
margin-left: -8%;
}
#schedule-button {
margin-left: auto;
margin-right: auto;
width: 50%;
}
#brightness-label {
font-size: 12px;
color: white;
}
.range-slider-input {
display: flex;
flex-direction: column;
text-align: left;
border: 1px solid white;
padding: 2%;
}
<div id="panel-led" class="panel">
<img src="swiatlo.jpg" class="obrazki" alt="swiatlo.jpg" /> LED: <span id="wartosc-led">[stanled]</span>
<br>
<button id="przycisk-led"></button>
<button id="przycisk-led1"></button>
<div class="popup-btn">
<button id="schedule-button" onclick="show_schedule()">Schedule</button>
<div class="range-slider-input">
<label for="brightness" id="brightness-label">Brightness</label>
<input type="range" id="rangeinput" min="0" max="255" value="122" name="brightness" onchange="rangevalue.value=value" />
</div>
</div>
</div>

Answer 2

I got rid of all the irrelevant code, and here's what I did:
Wrap both label and slider with div and give it style of flex column.
align-items:center is what centering both of them on the main axis.
width:max-content to make it not take the entire row's width.
Now you can put it anywhere you want :)
.special {
display: flex;
flex-direction: column;
align-items: center;
width: max-content;
}
<div class="special">
<span style="font-size: 12px;">bright</span>
<input type="range" id="rangeinput" min="0" max="255" value="122" />
</div>