如何通过输入值更改Slider的值

Posted 2021-04-04

function myFunction() {
  var slider = document.getElementById("myRange").value;
  document.getElementById("myRangeValue").value = "Rs: " + slider;
}

<div class="wrapper Slider">
  <input type="range" min="0" max="10000000" value="20000" name="myRange" id="myRange" onchange="myFunction()" style="margin-top: 10px;">
</div>

<div class="wrapper SliderValue">
  <input type="text" name="myRangeValue" value="Rs.0" id="myRangeValue" style="height:50px;text-align: center;font-size: 25px;">
</div>

因为当我滚动滑块时，输入框中的值会改变但是如何通过给出输入值来改变滑块的值？

假设输入值= 50000因此，滑块的值也会变为50000而不滚动它。

答案

给出滑块输入：

<div class="wrapper Slider">
    <input type="range" min="0" max="10000000" value="20000" class="slider " name="myRange" id="myRange" style="margin-top: 10px;">
</div>
<div class="wrapper SliderValue">  
    <input type="text" class="personal" name="myRangeValue" value="Rs.0"  id="myRangeValue" style="height:50px;text-align: center;font-size: 25px;">
</div>    

您可以在myRangeValue inout框中点击返回后使用以下javascript进行更新。

    document.getElementById('myRange').addEventListener('change', (evt) => {
        document.getElementById('myRangeValue').value = document.getElementById('myRange').value;
    });

    document.getElementById('myRange').addEventListener('mousemove', (evt) => {
        document.getElementById('myRangeValue').value = document.getElementById('myRange').value;
    });

    document.getElementById('myRangeValue').addEventListener("keyup", function (event) {
        if (event.keyCode !== undefined) { // Handle the event with KeyboardEvent.keyCode
            switch(event.keyCode) {
                case 13: // return key
                    event.preventDefault();
                    document.getElementById('myRange').value = document.getElementById('myRangeValue').value;
                    break;
                default:
                    // console.log('event.keyCode: ' + event.keyCode)
            }
        };
    });

这是一个jsfiddle，它演示了Change slider value上面的代码