[책] 자바스크립트 코드 레시피 278 - 154일차

슬라이더 값 읽어 오기

• 슬라이더의 값을 확인하고 싶을 때
• 슬라이더의 값을 변경하고 싶을 때

구문

input.요소.value 슬라이더의 현재 값

설명

input 요소의 type 속성을 range로 설정하면 슬라이더가 표시됩니다. 슬라이더는 최솟값 (min 속성)과 최댓값(max 속성) 범위 내에서 값을 자유롭게 선택할 수 있습니다. 자바스크립트는 value 속성을 사용해 요소에 접근할 수 있으며, 타입은 숫자가 아닌 문자열이므로 주의합니다.

실습

index.html

<input type="range" id="myRange" min="0" max="100" value="50">
<p class="log"></p>

---

script.js

const element = document.querySelector('#myRange');
const value = element.value;
document.querySelector('.log').innerHTML = `현재 값은 ${value} 입니다.`;