How to create slider to map a range of values in JavaScript ?

Last Updated : 25 Jul, 2024

The task is to map a range of values to another range of values like map (0-100) to (100-10000000) in JavaScript. There are two approaches that are discussed below.

Approach 1: Use the logarithmic scale to map the range. In this example, first, the log value of the range is calculated and then the scale is calculated using the difference of log values of the target scale to the difference of the start scale. Then use the exponentiation to map the range for a particular number.

Example: This example implements the above approach.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<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>
        let up = document.getElementById("GFG_UP");
        let 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;

            let down = document.getElementById("GFG_DOWN");

        function Slider(pos) {
            let minM = 0;
            let maxM = 100;
            let minV = Math.log(100);
            let maxV = Math.log(10000000);
            let 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>

</html>

Output:

Approach 2: This example also maps the value from one range to another but uses a different formula.

Example: This example implements the above approach.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<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>
        let up = document.getElementById("GFG_UP");
        let 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;

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

</html>

Output:

How to add float numbers using JavaScript ?

PranchalKatiyar

Improve

Article Tags :

How to create slider to map a range of values in JavaScript ?

Similar Reads

Thank You!

What kind of Experience do you want to share?