HTML

html type range show label

datalist {
  display: flex;
  justify-content: space-between;
  color: red;
  width: 50%;
}

input {
  width: 50%;
}

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="5"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="10"></option>
</datalist>