레인저 요소 슬라이더를 슬라이드하여 요소 보이기

사용자가 원을 밀어 넣고 hide를 함께 멈추었을 때 & 사용자가 범위 요소 슬라이더를 움직일 때 입력 유형이있는 원을 표시하려고합니다. 범위 슬라이더의 값을 표시하는 코드를 작성했으며 코드에서 계속 작동해야합니다. 코드는 다음과 같습니다레인저 요소 슬라이더를 슬라이드하여 요소 보이기

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="StyleSheet.css" type="text/css" /> 
    <script> 
     function updateTextInput(val){ 
      document.getElementById('textInput').value = val; 
     } 

    </script> 
</head> 
<body> 
    <div class="circle-text"> 
     <input type="text" id="textInput" value=""> 
    </div> 
    <input id="range" type="range" name="rangeInput" min="0" max="100" 
    onchange="updateTextInput(this.value);"> 
    </body> 
    </html>

출처

2017-05-17 Milad Xandi

에서 귀하의 질문/요청의 현재 양식이 아주 명확하지 않습니다. 가장 가까운 해석은 범위 입력 값을'mousedown'의 범위 손잡이와 관련하여 배치 된 원형 요소 (입력을 클릭하고 드래그하는 동안) 내에 표시하고 싶을 때'mouseup '에서이 요소 표시를 중단하려는 것입니다. 이 올바른지? –

예, 마우스의 원과 입력을 숨기고 마우스를 아래쪽으로 다시 표시하고 싶습니다. –

내가 제대로 질문을 이해 한 가정, 코드에 다음과 같은 추가 당신이있어 행동을 달성해야 후 :

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <style type="text/css"> 
 
     #textInput { 
 
      visibility: hidden; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="circle-text"> 
 
     <input type="text" id="textInput" value=""> 
 
    </div> 
 
    <input id="range" type="range" name="rangeInput" min="0" max="100" 
 
    oninput="updateTextInput(this.value);"> 
 

 
    <script> 
 
     // Select DOM elements 
 
     var rangeSlider = document.getElementById('range'); 
 
     var textInput = document.getElementById('textInput'); 
 

 
     // Add event listeners 
 
     rangeSlider.addEventListener("mouseup", function(){ 
 
      textInput.style.visibility = "hidden" ; 
 
     }); 
 

 
     rangeSlider.addEventListener("mousedown", function(){ 
 
      textInput.style.visibility = "visible" ; 
 
     }); 
 

 
     function updateTextInput(val){ 
 
      textInput.value = val; 
 
     } 
 
    </script> 
 
</body> 
 
</html>

출처

2017-05-18 08:29:10 almcd

레인저 요소 슬라이더를 슬라이드하여 요소 보이기

답변

관련 문제