[JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기
2022. 7. 15. 02:38ㆍProgram/JavaScript
167_자바스크립트에서 슬라이더 값 읽어 오기
[적용]
- 슬라이더의 값을 확인하고 싶을 때
- 슬라이더의 값을 변경하고 싶을 때
[문법]
| 속성 | 의미 | 타입 |
| input요소.value | 슬라이더의 현재 값 | 문자열 |
* input 요소는 <input type="range" />
[내용]
input 요소의 type 속성을 range로 설정하면 슬라이더가 표시된다.
슬라이더는 최소값(min 속성)과 최대값(max 속성) 범위 내에서 값을 자유롭게 선택할 수 있다.
자바스크립트는 value 속성을 사용해 요소에 접근할 수 있으며, 타입은 숫자가 아닌 문자열이므로 주의하자.
HTML index.html
<body>
<input type="range" id="myRange" min="0" max="100" value="50" />
<p class="log"></p>
</body>JavaScript main.js
// input 요소 참조
const element = document.querySelector('#myRange');
// 현재 값 가져오기
const value = element.value;
// 화면에 표시
document.querySelector('.log').innerHTML = `현재 값은 ${value} 입니다.`;
실행결과
value 속성에 숫자를 대입하여 값을 변경할 수 있으며,화면의 슬라이더 바가 변경된 값에 따라 변경된다.
// input 요소 참조
const element = document.querySelector('#myRange');
// 변경할 값 입력하기
element.value = 30;
// 현재 값 가져오기
const value = element.value;
// 화면에 표시
document.querySelector('.log').innerHTML = `현재 값은 ${value} 입니다.`;실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기 (0) | 2022.07.15 |
|---|---|
| [JavaScript] 자바스크립트에서 슬라이더 값 변경 확인하기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 드롭다운 메뉴값 변경 확인하기 (1) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 라디오 버튼 상태 변경 확인하기 (0) | 2022.07.14 |