[Javascript]볼륨조절 슬라이드바 만들기_input range

JavaScript로 볼륨 조절 슬라이더를 만들고 슬라이더 하단에 현재 값을 표시하려면
HTML, CSS 및 JavaScript를 사용할 수 있습니다.
다음과 같은 슬리이더 조절바를 사용해야 하는 경우에 필요한 코드를 단계별로 적용합니다.

 

 

 

0

 

1.CSS - 몇 가지 기본 CSS를 추가하여 슬라이더와 레이블의 스타일을 지정합니다. 취향에 따라 자유롭게 스타일을 사용자 지정할 수 있습니다.

<style>
.volume-slider-container {
width: 300px;
margin: 20px;
}

input[type="range"] {
width: 100%;
}

label {
display: block;
text-align: center;
font-size: 16px;
}
</style>

 

 

 

2.HTML - 볼륨 조절 슬라이더 역할을 하는 범위 입력 요소와 현재 값을 표시하는 레이블이 있는 HTML 구조를 만듭니다.

<div class="volume-slider-container">
<input type="range" id="volumeSlider" min="0" max="100" step="1">
<label for="volumeSlider" id="volumeLabel">0</label>
</div>

 

 

3.Javascript - 슬라이더를 움직일 때마다 레이블 값을 업데이트하도록 JavaScript 코드를 작성하십시오.

<script>
// 라벨에 표시된 값을 업데이트하는 기능
function updateVolumeLabel() {
const volumeSlider = document.getElementById('volumeSlider');
const volumeLabel = document.getElementById('volumeLabel');
volumeLabel.textContent = volumeSlider.value; }

// 슬라이더에 이벤트 리스너 추가
document.getElementById('volumeSlider').addEventListener('input', updateVolumeLabel);
</script>

 

 

이제 슬라이더를 움직일 때마다 해당 값이 슬라이더 하단에 표시됩니다.

볼륨 컨트롤 슬라이더를 사용하면 0에서 100까지의 값을 선택할 수 있으며 막대를 밀면 레이블에 선택한 값이 step="1" 설정의 값 만큼씩 동적으로 표시됩니다.

 

 

HTML 파일에 HTML 코드를, CSS 파일에 CSS 코드를, HTML 파일 내의 <script> 태그 또는 HTML에 연결된 별도의 JavaScript 파일에 JavaScript 코드를 배치할 수 있습니다.