[input] range에 눈금 만드는 방법

 <label for="howareyou">How are you? </label>
    <input id="howareyou" type="range" min="0" max="10" value="5" step="1" list="tickmarks" required/ ><br/>
      <datalist id="tickmarks">
         <option value="0"></option>
         <option value="1"></option>
         <option value="2"></option>
         <option value="3"></option>
         <option value="4"></option>
         <option value="5"></option>
         <option value="6"></option>
         <option value="7"></option>
         <option value="8"></option>
         <option value="9"></option>
         <option value="10"></option>
     </datalist>

 

value를 5로 설정하면 가운데서 시작 . step은 1칸의 설정값,

min,max는 최소값, 최대값을 설정 범위