<fieldset>
  <label><span>온도</span> <input type="range" name="temperature" value="30"></label>
  <label><span>습도</span> <input type="range" name="humidity" value="70"></label>
</fieldset>
input[type="range"] {
  vertical-align: middle;
  width: 200px;
}

input[name="temperature"] {
  accent-color: red;
}

input[name="humidity"] {
  accent-color: blue;
}

span {
  font-size: 1.2em;
  vertical-align: middle;
}

fieldset {
  display: flex;
  flex-direction: column;
  gap: 1em;
  border: none;
  margin: 0;
}

body {
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.