CODEWITHSUNDEEP
javascriptjquery
Radex
Radex

Reputation: 8577

Remaping value for a HTML input range

I am using an input range which has values allowed from 0 to 100. I need to map values from the slider to a input text, with the following rules:

      range => text
          0 => 2000
        100 =>  200

With the value in between accordingly. Currently I am using the following script, which works, but I would like to know:

text => range
2000 => 0
200  => 100


var slider = document.querySelector('#slider');
var result = document.querySelector('#result');
slider.addEventListener('change', function(event) {
  var sliderValue = event.target.value;
  var maxValue = 2000;
  var coef = 18;
  var calc;
  calc = maxValue - (sliderValue * coef);
  result.value = calc;
});
<input id="slider" type="range" name="points" min="0" max="100" value=0>
<input id="result" type="text" name="result">

Upvotes: 0

Views: 118

Answers (2)

GibboK
GibboK

Reputation: 73908

I have create a values remap utility which could help you out in your tasks.

You can see a working example below and it works in bi-direction, this means you can update your value using the slider or entering a different value in the input. It works with positive and negative values and you can also define a custom range (which could be useful if your slider has different steps from 100).

      (function () {
            /*
                Custom remap utility for values.
                Use case: Assigning custom values to a range slider.
                The HTML example shows how to map a range slider (range from 0% to 100%)
                to custom values and vice versa:
                slider <-> input
                    0% <->  2000
                  100% <->   200
            */
            let mapAToB = (value, mapMin, mapMax, range) => {
                let coef = (mapMax - mapMin) / range,
                    result = mapMin + (value * coef);
                return result;
            };
            let mapBToA = (value, mapMin, mapMax, range) => {
                let coef = (mapMax - mapMin) / range,
                    result = (value - mapMin) / coef;
                return result;
            };
            console.clear();
            let printOutTests = (message, mapMin, mapMax, range) => {
                console.log(message + ':-----------------------------');
                for (let v = 0, len = range; v <= len; v++) {
                    let value = mapAToB(v, mapMin, mapMax, range);
                    let step = mapBToA(value, mapMin, mapMax, range);
                    console.log(step, value);
                }
            };

            // tests
            //printOutTests('ex1a', 0, 1000, 100);
            //printOutTests('ex1b', 1000, 0, 100);

            //printOutTests('ex2a', 200, 2000, 100);
            //printOutTests('ex2b', 2000, 200, 100);

            //printOutTests('ex3a', -1000, 1000, 100);
            //printOutTests('ex3b', 1000, -1000, 100);

            //printOutTests('ex4a', -100, 100, 10);
            //printOutTests('ex4b', 100, -100, 10);

            //printOutTests('ex5a', 0, 1, 100);
            //printOutTests('ex5b', 1, 0, 100);

            document.addEventListener('DOMContentLoaded', function (event) {
                // configurations
                const SLIDER_MIN = 0,
                      SLIDER_MAX = 100,
                      MAP_START = 2000,
                      MAP_END = 200,
                      MAP_RANGE = 100;

                let slider = document.querySelector('#slider'),
                    sliderPercentageStart = document.querySelector('#slider-percentage-start'),
                    sliderPercentageEnd = document.querySelector('#slider-percentage-end'),
                    sliderMapStart = document.querySelector('#slider-map-start'),
                    sliderMapEnd = document.querySelector('#slider-map-end'),
                    input = document.querySelector('#input');

                slider.min = SLIDER_MIN;
                slider.max = SLIDER_MAX;

                sliderPercentageStart.innerHTML = 'slider min:' + SLIDER_MIN;
                sliderPercentageEnd.innerHTML = 'slider max:' + SLIDER_MAX;

                sliderMapStart.innerHTML = 'map range start:' + MAP_START;
                sliderMapEnd.innerHTML = 'map range end:' + MAP_END;

                slider.addEventListener('change', (event) => {
                    let sliderValue = Number(event.target.value),
                        inputValue = mapAToB(sliderValue, MAP_START, MAP_END, MAP_RANGE);
                    input.value = inputValue;
                });
                input.addEventListener('change', (event) => {
                    let inputValue = Number(event.target.value),
                        sliderValue = mapBToA(inputValue, MAP_START, MAP_END, MAP_RANGE);
                    slider.value = sliderValue;
                });
            });
        })();
    <div id="slider-percentage-start"></div>
    <div id="slider-percentage-end"></div>
    <div id="slider-map-start"></div>
    <div id="slider-map-end"></div>
    <input id="slider" type="range" name="slider">
    <input id="input" type="text" name="input">

Upvotes: 1

Emmanuel Delay
Emmanuel Delay

Reputation: 3679

<script>
function r2t (r) {
  return ( 2000 + r * (200-2000) / 100 );
}

function t2r (t) {
  return ((t - 2000) * 100) / (200 - 2000);
}
</script>

<div onclick="alert(r2t(0))">r2t(0)</div>
<div onclick="alert(r2t(1))">r2t(1)</div>
<div onclick="alert(r2t(100))">r2t(100)</div>
<div onclick="alert(r2t(200))">r2t(200)</div>
---
<div onclick="alert(t2r(0))">t2r(0)</div>
<div onclick="alert(t2r(200))">t2r(200)</div>
<div onclick="alert(t2r(2000))">t2r(2000)</div>

Upvotes: 1

Related Questions