목록으로

input range 4개를 하고 싶어요. 채택완료

주사쟝

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 1,668

답변 1

밑에 코드대로 짜봤는데,

커서를 움직이면 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>

#range

댓글을 작성하려면 로그인이 필요합니다.

답변 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>

로그인 후 평가할 수 있습니다