유형 = "범위"에 대한 틱 HTML 입력

Question

this을 읽은 후 type="range" 숫자 입력에 대해 Chrome 및 Firefox에서 틱을 표시 할 수 있는지 궁금합니다. 이 주제에서 가장 가까운 것은 this입니다.

Answer 1

입력 범위는 여전히 악몽 해킹의 비트입니다. 즉, 주요 브라우저에 눈금 표시를 표시하려면 이 가능한데, 팔꿈치 그리이스와 브라우저 별 솔루션을 사용하여이 가능합니다. 당신이 HTML step 속성을 추가 할 경우

---

인터넷 익스플로러/에지 당신이 알고 있어야하는 것으로

는 Internet Explorer에서 기본적으로 진드기를 표시합니다. 이벤트의 이상한 비틀기에서 Internet Explorer와 Edge는 입력 범위를 스타일링 할 때 가장 유연한 브라우저라고 할 수 있습니다.

<input type="range" min="0" max="100" step="25">

크롬 및 기타 웹킷 브라우저 (사파리 포함), 슬라이더에 눈금 위치의 커스텀 세트를 제공하는 DataList에 요소를 사용할 수에서

크롬/사파리

. 모든 주요 브라우저가이 요소를 지원하지만 Firefox (및 기타 Gecko 브라우저)에는 눈금이 표시되지 않습니다.

<input type="range" min="0" max="100" step="25" list="steplist"> 
 
<datalist id="steplist"> 
 
    <option>0</option> 
 
    <option>25</option> 
 
    <option>50</option> 
 
    <option>75</option> 
 
    <option>100</option> 
 
</datalist>

파이어 폭스는 파이어 폭스와 다른 Gecko 기반 브라우저에서

, 우리는 눈금을 추가하는 일부 공급 업체 특정 CSS를 사용해야합니다. 이 항목을 사용자에게 가장 자연스럽게 보이는대로 사용자 지정해야합니다. 이 예에서는 눈금처럼 보이는 "수직 줄무늬"를 추가하기 위해 가로로 반복되는 그라데이션을 사용했지만 배경 이미지 나 원하는 다른 스타일을 사용할 수도 있습니다. 약간의 Javascript를 사용하여 datalist 요소의 정보를로드 한 다음 적절한 그라디언트를 생성하고 요소에 적용하여 모든 요소가 자동으로 발생하도록 사용자 지정 임의 중지를 지원할 수도 있습니다.

---

호환성 노트

input[type="range"]::-moz-range-track { 
 
    padding: 0 10px; 
 
    background: repeating-linear-gradient(to right, 
 
    #ccc, 
 
    #ccc 10%, 
 
    #000 10%, 
 
    #000 11%, 
 
    #ccc 11%, 
 
    #ccc 20%); 
 
}

<input type="range" min="0" max="100" step="25" list="steplist"> 
 
<datalist id="steplist"> 
 
    <option>0</option> 
 
    <option>25</option> 
 
    <option>50</option> 
 
    <option>75</option> 
 
    <option>100</option> 
 
</datalist>

: 코멘트에 지적한 바와 같이, DataList에 is not supported by some browsers. 브라우저가 지원되지 않거나 인식 할 수없는 요소를 처리하는 방법에 따라 브라우저에서 옵션 값을 범위 입력 아래 일반 텍스트로 표시 할 수 있습니다. 가능한 가장 넓은 범위의 브라우저를 타겟팅하는 것이 중요한 경우 문제가 될 수 있습니다.

한 가지 해결책은 gecko 브라우저 외에 웹킷 브라우저에 이상한 repeating-linear-gradient kludge를 사용하고 데이터 목록을 완전히 제거하는 것입니다.

또 다른 해결책은 명시 적으로 데이터 목록을 display: none으로 설정하는 것입니다. 레거시 지원을 제공하는 기능을 손상시키지 않으므로이 솔루션이 가장 바람직합니다.

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