javascript - 将范围 slider 输出到文本输入字段

Question

为什么文本字段在加载时完全为空并且无论我的 slider 值如何都保持为空？

子问题:他们应该联系起来吗？如果我在输入文本字段中输入一个值， slider 是否会相应移动？

    var slider = document.getElementById("myRange"); 
    var output = document.getElementById("demo");
    output.innerHTML = slider.value; 
    slider.oninput = function() 
    { output.innerHTML = this.value; }

   .slidecontainer { width: 100%; } 

    .slider { -webkit-appearance: none; width: 100%; height: 25px;
    background: #d3d3d3; outline: none; opacity: 0.7;
    -webkit-transition: .2s; transition: opacity .2s; }
 
    .slider:hover { opacity: 1; } 

    .slider::-webkit-slider-thumb { -webkit-appearance: none;
    appearance: none; width: 25px; height: 25px; background:
    #4CAF50; cursor: pointer; } 

    .slider::-moz-range-thumb { width: 25px; height: 25px;
    background: #4CAF50; cursor: pointer; } 

 <div class="slidecontainer"> 
    <input type="range" min="1000" max="5000000"
    value="250000" class="slider" id="myRange"> 
    <input type="text" id="demo" value=""> 
    </div> 

Answer 1

使用代码如下

使用 .value 代替 innerHTML 并使用 oninput="myFunction(this)" 到 #slide

    var slider = document.getElementById("myRange"); 
    var output = document.getElementById("demo");
    output.value = slider.value; 
    function myFunction(x) {
    output.value = x.value;
}

   .slidecontainer { width: 100%; } 

    .slider { -webkit-appearance: none; width: 100%; height: 25px;
    background: #d3d3d3; outline: none; opacity: 0.7;
    -webkit-transition: .2s; transition: opacity .2s; }
 
    .slider:hover { opacity: 1; } 

    .slider::-webkit-slider-thumb { -webkit-appearance: none;
    appearance: none; width: 25px; height: 25px; background:
    #4CAF50; cursor: pointer; } 

    .slider::-moz-range-thumb { width: 25px; height: 25px;
    background: #4CAF50; cursor: pointer; } 

<div class="slidecontainer"> 
    <input type="range" min="1000" max="5000000" oninput="myFunction(this)"
    value="250000" class="slider" id="myRange"/> 
    <input type="text" id="demo" value=""/> 
</div> 

子问题:

使用 onchange="setSlider(this)" 更改 #demo 当您单击 Enter 或从 退出时，幻灯片将移动>#演示

        var slider = document.getElementById("myRange"); 
        var output = document.getElementById("demo");
        output.value = slider.value; 
        function myFunction(x) {
        output.value = x.value;
    }
           function setSlider(x) {
         slider.value= x.value;
    }

       .slidecontainer { width: 100%; } 

        .slider { -webkit-appearance: none; width: 100%; height: 25px;
        background: #d3d3d3; outline: none; opacity: 0.7;
        -webkit-transition: .2s; transition: opacity .2s; }
     
        .slider:hover { opacity: 1; } 

        .slider::-webkit-slider-thumb { -webkit-appearance: none;
        appearance: none; width: 25px; height: 25px; background:
        #4CAF50; cursor: pointer; } 

        .slider::-moz-range-thumb { width: 25px; height: 25px;
        background: #4CAF50; cursor: pointer; } 

<div class="slidecontainer"> 
        <input type="range" min="1000" max="5000000" oninput="myFunction(this)"
        value="250000" class="slider" id="myRange"/> 
        <input type="text" id="demo" value="" onchange="setSlider(this)"/> 
    </div>