显示一个滑动游侠元素滑块的元素

我想显示一个圆形的输入类型，当用户滑动范围元素滑块滑动时用户停止滑动圆圈并输入隐藏在一起。我写了一段代码来显示范围滑块的值，它应该继续工作在我的代码中。的代码是：显示一个滑动游侠元素滑块的元素

<!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

显示一个滑动游侠元素滑块的元素

回答

相关问题