content.html

<div class="ring">
  <input type="range" name="temp" list="major" />

  <datalist id="major">
    <option value="0" label="1"></option>
    <option value="2.5"></option>
    <option value="5"></option>
    <option value="7.5"></option>
    <option value="10" label="2"></option>
    <option value="12.5"></option>
    <option value="15"></option>
    <option value="17.5"></option>
    <option value="20" label="3"></option>
    <option value="22.5"></option>
    <option value="25"></option>
    <option value="27.5"></option>
    <option value="30" label="4"></option>
    <option value="32.5"></option>
    <option value="35"></option>
    <option value="37.5"></option>
    <option value="40" label="5"></option>
    <option value="42.5"></option>
    <option value="45"></option>
    <option value="47.5"></option>
    <option value="50" label="6"></option>
    <option value="52.5"></option>
    <option value="55"></option>
    <option value="57.5"></option>
    <option value="60" label="7"></option>
    <option value="62.5"></option>
    <option value="65"></option>
    <option value="67.5"></option>
    <option value="70" label="8"></option>
    <option value="72.5"></option>
    <option value="75"></option>
    <option value="77.5"></option>
    <option value="80" label="9"></option>
    <option value="82.5"></option>
    <option value="85"></option>
    <option value="87.5"></option>
    <option value="90" label="10"></option>
    <option value="92.5"></option>
    <option value="95"></option>
    <option value="97.5"></option>
    <option value="100" label="11"></option>
  </datalist>
</div>

<style>
  * {
    font-family: monospace;
  }

  .ring {
    width: 400px;
  }

  .ring > :is(input, datalist) {
    width: 100%;
  }

  datalist {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 4px;
  }
</style>