Show tick positions in custom range input

Question

Please take a look at the following CodePen. There you can see my custom range input. I want the tick positions of the slider to be shown and for that I added the datalist:<

Answer 1

-webkit-appearance: none;

The above removes platform-native styling (Chrome / Safari), which removes the ticks.

You can get more information here, but unfortunately, styling support for input ranges (particularly ticks) is still pretty terrible.