input range 4개를 하고 싶어요. 채택완료
밑에 코드대로 짜봤는데,
커서를 움직이면 4번째 range Value 값숫자만 변경이되네요.
어떻게 해야 각각 숫자가 움직일까요? ㅠㅠ
</p>
<p><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}</p>
<p>.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}</p>
<p>.slider:hover {
opacity: 1;
}</p>
<p>.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}</p>
<p>.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
</style>
</head>
<body></p>
<p><h1>Custom Range Slider</h1></p>
<p><div class="slidecontainer"></p>
<p> <p>Value: <span id="demo"></span></p>
<input type="range" min="1" max="100" value="50" id="myRange">
<p>Value: <span id="demo2"></span></p>
<input type="range" min="1" max="100" value="50" id="myRange2">
<p>Value: <span id="demo3"></span></p>
<input type="range" min="1" max="100" value="50" id="myRange3">
<p>Value: <span id="demo4"></span></p>
<input type="range" min="4" max="100" value="50" id="myRange4">
</div></p>
<p><script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;</p>
<p>slider.oninput = function() {
output.innerHTML = this.value;
}
</script></p>
<p><script>
var slider = document.getElementById("myRange2");
var output = document.getElementById("demo2");
output.innerHTML = slider.value;</p>
<p>slider.oninput = function() {
output.innerHTML = this.value;
}
</script></p>
<p><script>
var slider = document.getElementById("myRange3");
var output = document.getElementById("demo3");
output.innerHTML = slider.value;</p>
<p>slider.oninput = function() {
output.innerHTML = this.value;
}
</script></p>
<p><script>
var slider = document.getElementById("myRange4");
var output = document.getElementById("demo4");
output.innerHTML = slider.value;</p>
<p>slider.oninput = function() {
output.innerHTML = this.value;
}
</script></p>
<p></body>
</html></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
</p>
<p><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Custom Range Slider</h1>
<div class="slidecontainer">
<p>Value: <span id="demo"></span></p>
<input type="range" min="1" max="100" value="50" id="myRange">
<p>Value: <span id="demo2"></span></p>
<input type="range" min="1" max="100" value="50" id="myRange2">
<p>Value: <span id="demo3"></span></p>
<input type="range" min="1" max="100" value="50" id="myRange3">
<p>Value: <span id="demo4"></span></p>
<input type="range" min="4" max="100" value="50" id="myRange4">
</div></p>
<p> </p>
<p><script>
function fn_oninput() {
output = this.previousElementSibling.querySelector('span');
output.innerHTML = this.value;
}</p>
<p> var sliders = document.querySelectorAll('input[type="range"]');
sliders.forEach((el, i) => {
fn_oninput.call(el);
el.oninput = fn_oninput;
});
</script></p>
<p> </p>
<p></body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
