How to put label above range slider-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>