HTML과 CSS만 사용하여 범위 값을 표시하는 방법은 무엇입니까?

HTML5 입력 유형 범위를 사용하여 범위 값 표시

범위 슬라이더를 사용하여 웹사이트를 만들면 값을 편리하게 조정할 수 있습니다. 그러나 더 쉽게 참조할 수 있도록 현재 슬라이드 값을 텍스트 상자에 표시하는 것이 도움이 될 수 있습니다. jQuery는 간단한 솔루션을 제공하지만 HTML과 CSS만 사용하여 이 기능을 구현하는 것이 가능합니다.

해결책:

JavaScript 없이 현재 범위 값을 쉽게 표시하려면, 다음 HTML 코드를 구현하세요.

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

이 코드에서는

• 요소는 해당 값, 최소값 및 최대값에 대한 속성으로 범위 슬라이더를 정의합니다.
• oninput 이벤트 리스너는 범위 슬라이더가 조정될 때마다 인접한 형제 출력 요소의 값을 업데이트합니다.
• <출력> 요소는 현재 범위 값을 표시합니다.

이 방법을 활용하면 외부 스크립트 없이 텍스트 상자에 범위 값을 쉽게 표시할 수 있습니다.

위 내용은 HTML과 CSS만 사용하여 범위 값을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!