Javascript 通过滑动ranger元素滑块显示元素_Javascript_Jquery_Range_Geometry

Javascript 通过滑动ranger元素滑块显示元素

javascript jquery geometry

Javascript 通过滑动ranger元素滑块显示元素,javascript,jquery,range,geometry,Javascript,Jquery,Range,Geometry,当范围元素滑块按用户滑动时，我想显示一个带有输入类型的圆&当用户停止滑动圆并将输入隐藏在一起时。我写了一个代码来显示范围滑块的值，它应该在我的代码中继续工作。代码是： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="Style

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

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

假设我正确理解了您的问题，那么您的代码中添加的以下内容将实现您所追求的行为：

文本输入{ 可见性：隐藏； } //选择DOM元素 var rangeSlider=document.getElementById'range'； var textInput=document.getElementById'textInput'； //添加事件侦听器 RangeSloider.addEventListenermouseup，函数{ textInput.style.visibility=隐藏； }; rangeSlider.addEventListenermousedown，函数{ textInput.style.visibility=可见； }; 函数updateTextInputval{ textInput.value=val； }

以目前的形式，您的问题/要求相当不明确。最接近的解释是，当单击并拖动输入时，您希望在与鼠标向下上的范围旋钮相关的圆形元素内显示范围输入的值，并且您希望停止在鼠标上显示此元素。这是正确的吗？是的，我想用鼠标向上隐藏圆圈和输入，然后用鼠标向下再次显示它们。