📍codepen 링크
https://codepen.io/a6ovestudio/pen/QWVgRMy
input & datalist
...
codepen.io
- 예시
📍1. 게이지 만들기
✅type="range" 만 이용
- 예시
- 기본적인 게이지 형태
- min, max 값을 설정할 수 있음
📍2. 눈금이 있는 게이지 만들기
✅type="range" 와 datalist를 활용
- input의 list 어트리뷰트와 datalist의 id를 동일하게 설정
- datalist 내에 option element 가 가진 value의 숫자 만큼 눈금이 정해진다
- 예시
📍3. 부제목이 있는 드롭다운 만들기
✅type="range" 와 datalist를 활용, options의 value에 숫자 대신 문자열 입력
- datalist 내부의 option 들의 value에 문자열을 지정하면, 게이지 대신 드롭다운 리스트를 만들 수 있다
- value 어트리뷰트 값이 메인 값, contents 값이 부제목이 된다
- 예시
