title: Range input (slider) with markings for intermediate points
body: <p>I want a slider using HTML5 like this: <img src="https://i.stack.imgur.com/i2A5a.png" alt="enter image description here">
  where I can display the value. I have tried the below code:</p>
  
  <pre><code>&lt;input type=range min=0 max=100 value=50 step=1 list=tickmarks&gt;
      &lt;datalist id=tickmarks&gt;
          &lt;option value="0 to 20"&gt;0&lt;/option&gt;
          &lt;option&gt;20&lt;/option&gt;
          &lt;option&gt;40&lt;/option&gt;
          &lt;option&gt;60&lt;/option&gt;
          &lt;option&gt;80&lt;/option&gt;
          &lt;option&gt;100&lt;/option&gt;
      &lt;/datalist&gt;
  </code></pre>
  
  <p>But nothing seems to work. Any Idea?</p>