프론트엔드/HTML

[HTML] 볼륨 조절 효과 만들기 feat. input type="range"

jinwanseo 2021. 8. 14. 21:57
728x90

[HTML] 볼륨 조절 하는 것 같은 태그 만들기 feat. input range

 

 

해당 효과를 input에 타입만 range로 하면 될것을

예전 포트폴리오 만들적에 이렇게 간단한걸

css 와 javascript 로 하나하나 순수 구현했던 기억이 난다

 

⭐️  기본 형태

<!-- min, max 속성을 통해 처음과 끝 값을 제한할수 있다-->
<input type="range" min="1" max="10"/>

 

⭐️  샘플 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="range" min="1" max="12" id="ex-in">
    <div id="ex-out"></div>
    <script>
        document.querySelector('#ex-in').addEventListener('input',e=>{
            document.querySelector('#ex-out').innerHTML= e.target.value;
        });
    </script>
</body>
</html>

 

🌈  출력 결과

728x90