Showing 'tick marks' with HTML range sliders

I am trying to show 'ticks' with HTML range sliders. Like this:

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.

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.

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)

I've set up a codepen here:

http://codepen.io/pliablepixels/pen/EjdpVB?editors=101

(SO insists if I insert a codepen link, I need to also insert code, so here is the code for the input)

<input type=range ng-model="myRange" min=0 max=20 step = 1 list="vals">

    <datalist id="vals">
      <option>2</option>
      <option>6</option>
      <option>8</option>
   </data-list>

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?