title: Showing 'tick marks' with HTML range sliders
body: <p>I am trying to show 'ticks' with HTML range sliders. Like this:
  <a href="https://i.stack.imgur.com/voOUJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/voOUJ.png" alt="range with ticks"></a></p>
  
  <p>While the HTML range directive allows for ticks with "step" and "datalist", Safari does not honor it while Chrome does. I am building an ionic/Angular app, so this means it does not work for iOS devices.</p>
  
  <p>There are some 3rd party sliders like angular-awesome-slider that do support a form of ticks, but they have other issues which make them less usable for my need.</p>
  
  <p>So my requirement is this: Given an HTML range slider, how do I go about adding an overlay on top that displays "|" marks at specific places on top of the slider?
  (Note that the positioning of the "|" needs to take into account the display width of the slider)</p>
  
  <p>I've set up a codepen here: </p>
  
  <blockquote>
    <p><a href="http://codepen.io/pliablepixels/pen/EjdpVB?editors=101" rel="nofollow noreferrer">http://codepen.io/pliablepixels/pen/EjdpVB?editors=101</a></p>
  </blockquote>
  
  <p>(SO insists if I insert a codepen link, I need to also insert code, so here is the code for the input)</p>
  
  <pre><code>&lt;input type=range ng-model="myRange" min=0 max=20 step = 1 list="vals"&gt;
  
      &lt;datalist id="vals"&gt;
        &lt;option&gt;2&lt;/option&gt;
        &lt;option&gt;6&lt;/option&gt;
        &lt;option&gt;8&lt;/option&gt;
     &lt;/data-list&gt;
  </code></pre>
  
  <p>with an input range. As you see it shows ticks on Chrome but not on Safari. Can someone be so kind as to help me get started with my objective?</p>