Linear Mapping Example

HTML

<h1 id="result"></h1>

CSS

html, body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #555;
  background-color: #fc0;
	background-image: linear-gradient(45deg, #fc0, #ff0);
	background-image: -webkit-linear-gradient(45deg, #fc0, #ff0);
}

JavaScript

function linearMap(currentValue, currentMin, currentMax, newMin, newMax) {
    var newSize = newMax - newMin;
    var oldSize = currentMax - currentMin;
    var oldScale = currentValue - currentMin;
    return (newSize * oldScale / oldSize) + newMin;
}
var val = 8.3;
var oldMin = 0;
var oldMax = 10;
var newMin = 0;
var newMax = 1;
var result = linearMap(val, oldMin, oldMax, newMin, newMax).toFixed(2);
document.getElementById("result").innerText = 'Mapping a value of ' + val +
																							' in an existing range of ' + oldMin +
                                              ' - ' + oldMax +
                                              ' to a new range of ' + newMin +
                                              ' - ' + newMax +
                                              ' yields a result of ' + result;