JavaScript 없이 텍스트 상자에 범위 슬라이더 값을 표시하는 방법은 무엇입니까?

자바스크립트 없이 텍스트 상자에 범위 슬라이더 값 표시

범위 슬라이더를 활용한 웹사이트 제작 시 현재 슬라이드 값을 표시하는 기능 텍스트 상자에 추가하면 유용한 추가 기능이 될 수 있습니다. 이는 간단한 작업처럼 보이지만 JavaScript나 jQuery를 사용하지 않고도 달성할 수 있습니다.

이를 달성하려면 HTML5 입력 유형 범위와 해당 oninput 이벤트 리스너를 활용하면 됩니다. oninput 이벤트를 범위 입력에 할당하면 인접한 출력 요소의 값을 조작하여 원하는 동작을 효과적으로 복제할 수 있습니다.

다음 코드 조각을 고려하세요.

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

여기서 예를 들어 oninput 이벤트 핸들러는 범위 슬라이더의 현재 값과 일치하도록 범위 입력 바로 다음에 출력 요소의 텍스트 값을 설정합니다. 슬라이더를 조정하면 표시되는 값이 실시간으로 업데이트되어 기존에 JavaScript 또는 jQuery를 통해 달성했던 기능을 반영합니다.

위 내용은 JavaScript 없이 텍스트 상자에 범위 슬라이더 값을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!