title: Input range move only by one step
body: <p>I'm trying to use input range moving one by one. For exemple here is my slider :</p>
  
  <pre><code>&lt;input id="replay-input" type="range" min="0" max="100" step="1" value="0"&gt;
  </code></pre>
  
  <p>Really basic. But the problem is that you can freely move from 5 to 89 by one click. What I would like to achieve is to increment or decrements only by one so my value will look like this is if I move the cursor :</p>
  
  <p>0 -> 1 -> 2 -> 3 -> 4</p>
  
  <p>Then if I go back :</p>
  
  <p>4 -> 3 -> 2 -> 1 -> 0</p>
  
  <p>With big <code>max</code> like 5000 we have missing steps because there is too many values on a small area :</p>
  
  <p>4800 -> 4799 -> 4790 -> 4785</p>
  
  <p>Is there a way to avoid this ? One idea may be to use JS and store value and only allow change of one but maybe there is something more simple in HTML ?</p>
  
  <p><a href="https://jsfiddle.net/vcoyxg4v/5/" rel="nofollow noreferrer">https://jsfiddle.net/vcoyxg4v/5/</a></p>
  
  <p>Thanks !</p>