JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div style="height: 20px; width: 100%;">
  <span style="position: absolute; left: 0%; text-align: center;">0.01</span>
  <span style="position: absolute; left: 9.90991%; text-align: center;">1</span>
  <span style="position: absolute; left: 19.9199%; text-align: center;">2</span>
  <span style="position: absolute; left: 27.027%; text-align: center;">e</span>
  <span style="position: absolute; left: 29.9299%; text-align: center;">3</span>
  <span style="position: absolute; left: 39.9399%; text-align: center;">4</span>
  <span style="position: absolute; left: 49.9499%; text-align: center;">5</span>
  <span style="position: absolute; left: 59.96%; text-align: center;">6</span>
  <span style="position: absolute; left: 69.97%; text-align: center;">7</span>
  <span style="position: absolute; left: 79.98%; text-align: center;">8</span>
  <span style="position: absolute; left: 89.99%; text-align: center;">9</span>
  <span style="position: absolute; left: 100%; text-align: center;">10</span>
</div>
   <input type="range" list="ticks" min="0" max="100" style="width: 100%;">
   <datalist id="ticks">
      <option>
         0
      </option>
      <option>
         9
      </option>
      <option>
         19
      </option>
      <option>
         27
      </option>
      <option>
         29
      </option>
      <option>
         39
      </option>
      <option>
         49
      </option>
      <option>
         59
      </option>
      <option>
         69
      </option>
      <option>
         79
      </option>
      <option>
         89
      </option>
      <option>
         100
      </option>
   </datalist>
</div>