Remap value of range input element I have following input range (slider), values allowed are from 0 to 100.
I need to map values from the slider to a input text, with the following rules:

      range =&gt; text
          0 =&gt; 2000
        100 =&gt;  200


With the value in between accordingly.
Currently I am using the following script, which works, but I would like to know if there is a better way to do it.



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;
});
&lt;input id="slider" type="range" name="points" min="0" max="100" value=0&gt;
&lt;input id="result" type="text" name="result"&gt;
First, I would move out that equation to its own function. It takes an input number (your value), and returns a result (the text). Doing it this way makes easily testable functions a habit.

function getTextFromRangeValue(value){
  return maxValue - (value * coef);
}


With this comes separation of your DOM handler logic. This allows your logic (the calculation code) to be very reusable as it is now detached from the DOM-handling code.

slider.addEventListener('change', function(event) {
  result.value = getTextFromRangeValue(event.target.value);
});


maxValue and coef are constants, fixed values. It's a programming convention to name constants with uppercase characters separated with underscores. Additionally, lift them out the handler scope so they're not recreated on every call. They should be named in full, avoid abbreviations.

var slider = document.querySelector('#slider');
var result = document.querySelector('#result');
var MAX_VALUE = 2000;
var COEFFICIENT = 18;


If I were to rewrite this code, here's how I'd do it.

const slider = document.querySelector('#slider');
const result = document.querySelector('#result');
const MAXIMUM_VALUE = 2000;
const COEFFICIENT = 18;

function getTextFromRangeValue(value){
  return MAXIMUM_VALUE - (value * COEFFICIENT);
}

slider.addEventListener('change', function(event) {
  result.value = getTextFromRangeValue(event.target.value);
});


Lastly, as mentioned in the comments, if this code isn't in a module or in its own scope, consider wrapping in an IIFE to avoid cloberring and being clobbered in the global scope.