Range

.form-range replaces the native slider with a gray track and a round blue thumb that look the same in every engine. min and max default to 0 and 100.

A range slider with an output elementHTMLLive
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<form class="p-3" oninput="vol.value = level.value">
  <label for="level" class="form-label">Volume: <output id="vol">70</output>%</label>
  <input type="range" class="form-range" id="level" step="5" value="70">
</form>
Browser output of Listing 3.37
Browser output of 37