Le jour où tu t'aperçois comme un abruti que l'input de type range prévoit la possibilité d'ajouter des repères et même des repères avec des labels !

Genre:

<input type="range" list="tickmarks">
<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>

EDIT: Ha mais c'est pas standardisé, tous les navigateurs ne l'utilisent pas... firefox par exemple...