После чтения this Мне было интересно, можно ли показывать тики в Chrome и Firefox для ввода номера type="range"
? Самое близкое, что я мог найти по этому вопросу, - this.
Клещи для ввода типа = "range" HTML
Ответ 1
Диапазоны ввода все еще немного кошмарного взлома, когда дело доходит до стилизации. Тем не менее, возможно отображение тиков в основных браузерах, с небольшим количеством смазки локтя и решений, специфичных для браузера.
Internet Explorer/Edge
Как вы, кажется, знаете, Internet Explorer будет показывать тики по умолчанию, если вы добавите атрибут HTML step
. В странном твисте событий Internet Explorer и Edge, возможно, являются наиболее гибким браузером, когда речь идет о диапазонах ввода стиля.
<input type="range" min="0" max="100" step="25">
Ответ 2
Вы можете использовать <datalist>
с диапазоном:
<input type="range" min="0" value="0" max="10" step="1" list="ticks">
<datalist id="ticks">
<option>0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</datalist>