Показывает «отметки» с ползунками диапазона HTML

Question

Я пытаюсь показать «тики» с ползунками диапазона HTML. Пример:

В то время как директива HTML range допускает тики с помощью «шага» и «даталиста», Safari не почитает его, пока Chrome делает. Я создаю ионное/угловое приложение, поэтому это означает, что он не работает для устройств iOS.

Есть некоторые сторонние слайдеры, такие как угловой-удивительный слайдер, которые поддерживают форму тиков, но у них есть другие проблемы, которые делают их менее пригодными для моей потребности.

Итак, мое требование таково: учитывая слайдер диапазона HTML, как мне добавить добавление сверху сверху, которое отображает «|» метки в определенных местах на верхней части слайдера? (Обратите внимание, что позиционирование "|" необходимо принимать во внимание ширину экрана слайдера)

Я установил вверх codepen здесь:

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

(SO настаивает, если я ввожу codepen ссылку, мне нужно также вставить код, так вот код для входа)

<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> 

с I диапазон nput. Как вы видите, это показывает тики на Chrome, но не на Safari. Может ли кто-нибудь быть таким добрым, чтобы помочь мне начать с моей цели?

Answer 1

Это уже поздно :-) Но вы уверены (у меня нет установленного Safari для проверки), что это не поможет, если ваш тег <datalist id="vals"> соответствует вашему тегу </data-list>?

Я искренне удивлен, что он работает для Chrome! Хотя он определенно ломается, если вы меняете открывающий тег на <data-list>