gibbok/gibbok-values-remap-utility.html

## gibbok-values-remap-utility.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        (function () {
            /*
                Values remap utility.
                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;
                });
            });
        })();
    </script>
</head>
<body>
    <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">
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8" />
	<script>
	(function () {
	/*
	Values remap utility.
	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;
	});
	});
	})();
	</script>
	</head>
	<body>
	<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">
	</body>
	</html>