JavaScript 如何创建滑块来映射值的范围

任务是将一个值范围映射到另一个值范围，例如将（0-100）映射到（100-10000000）的范围。下面讨论了两种方法。

方法1： 使用对数尺度来映射范围。在这个示例中，首先计算范围的对数值，然后使用目标尺度的对数值与起始尺度的差值来计算比例尺。然后使用指数运算将特定数字映射到范围。

示例： 这个示例实现了上述方法。

<body style="text-align:center;"> 
    <h1>GeeksForGeeks</h1> 
    <h3> 
        Create slider to map a range of values 
    </h3> 
  
    <p id="GFG_UP"></p> 
  
    <button onclick="myGFG()"> 
        Click Here 
    </button> 
  
    <p id="GFG_DOWN"></p> 
    <script> 
        var up = document.getElementById("GFG_UP"); 
        var val = 50; 
        up.innerHTML = "Click on the button to map" 
            + " the value(0-100) to a range from " 
            + "100 to 10, 000, 000<br> Val - " + val; 
          
        var down = document.getElementById("GFG_DOWN"); 
          
        function Slider(pos) { 
            var minM = 0; 
            var maxM = 100; 
            var minV = Math.log(100); 
            var maxV = Math.log(10000000); 
            var scal = (maxV - minV) / (maxM - minM); 
            return Math.exp(minV + scal * (pos - minM)); 
        } 
        function myGFG() { 
            down.innerHTML = "The value for " 
                + val + " is " + Slider(val); 
        } 
    </script> 
</body>

输出:

JavaScript 如何创建滑块来映射值的范围

方法2： 这个示例也将一个范围的值映射到另一个范围，但使用了不同的公式。

示例： 这个示例实现了上述方法。

<body style="text-align:center;"> 
    <h1>GeeksForGeeks</h1> 
    <h3> 
        Create slider to map a range of values in JavaScript 
    </h3> 
  
    <p id="GFG_UP"></p> 
  
    <button onclick="myGFG()"> 
        Click Here 
    </button> 
  
    <p id="GFG_DOWN"></p> 
  
    <script> 
        var up = document.getElementById("GFG_UP"); 
        var val = 50; 
        up.innerHTML = "Click on the button to map" 
            + " the value(0-100) to a range from " 
            + "100 to 10, 000, 000<br> Val - " + val; 
          
        var down = document.getElementById("GFG_DOWN"); 
        function Slider(pos) { 
            return Math.floor(-900 + 1000 * 
                    Math.exp(pos / 10.857255959)); 
        } 
        function myGFG() { 
            down.innerHTML = "The value for " 
            + val + " is " + Slider(val); 
        } 
    </script> 
</body>

输出：

JavaScript 如何创建滑块来映射值的范围