Question

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

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

Answer 1

假设我已正确理解您的问题，您对代码的以下添加应该会实现您所追求的行为：

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

使用滑动游侠元素滑块显示元素

1 个答案: