Клещи для ввода типа = "range" HTML

После чтения this Мне было интересно, можно ли показывать тики в Chrome и Firefox для ввода номера type="range"? Самое близкое, что я мог найти по этому вопросу, - this.

Ответы

Ответ 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>