顯示一個滑動遊俠元素滑塊的元素

我想顯示一個圓形的輸入類型，當用戶滑動範圍元素滑塊滑動時用戶停止滑動圓圈並輸入隱藏在一起。我寫了一段代碼來顯示範圍滑塊的值，它應該繼續工作在我的代碼中。的代碼是：顯示一個滑動遊俠元素滑塊的元素

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

顯示一個滑動遊俠元素滑塊的元素

回答

相關問題