Convert percentage to real in the input Rage slider Html5

Question

I need to convert mine input range of percentage to dinheiro and the minimum value shall be R$170,00 and the maximum R$ 5.000,00 I tried to touch the script to convert but it keeps giving error follows my code and a screen shot of input:

Html:

<div class="ranged">
                            <h4 class="title-ranged">Gasto médio mensal</h4>
                            <div class="range-slider">
                                <input type="range" orient="vertical" min="0" max="100" />
                                <div class="range-slider__bar"></div>
                                <div class="range-slider__thumb"></div>
                            </div>
                        </div>

SCSS:

.ranged{
      position: relative;
      .title-ranged{
        text-transform: uppercase;
        font-family: 'proximaBlack';
        letter-spacing: 5px;
        position: absolute;
        top: 50%;
        left: -170px;
        z-index: -1;
        @include opacity(.2);
        @include rotate(-90deg);

      }
      .range-slider {
        display: inline-block;
        width: 145px;
        position: relative;
        text-align: center;
        height: 400px;
        max-height: 100%;
        margin-top: 40px;


        &:before {
          position: absolute;
          top: -2em;
          left: .5em;
          content: attr(data-slider-value) "%";
          color: $gray-dark;
          font-family: 'proximaBold';
          font-size: 18px;
        }

        &:after {
          content:"";
          position: absolute;
          bottom: 0;
          left: 45px;
          background-color: $gray-range;
          height: 400px;
          width: 60px;
          z-index: -1;
          @include border-radius(60px);
        }
      }

      .range-slider__thumb {
        position: absolute;
        left: 45px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background: white;
        color: #777;
        font-size: 50%;
        box-shadow: 0 0 20px 14px #18a0743b;
        @include border-radius(50%);
        pointer-events: none;
        cursor: pointer;
        z-index: 1;
      }

      .range-slider__bar {
        left: 45px;
        bottom: 0;
        position: absolute;
        /* background: linear-gradient(dodgerblue, blue); */
        background-image: url(../images/gradient.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        pointer-events: none;
        width: 60px;
        @include border-radius(0 0 60px 60px);
        z-index: 1;
      }

      .range-slider input[type=range][orient=vertical] {
        position: relative;
        margin: 0;
        height: 100%;
        width: 100%;
        display: inline-block;
        position: relative;
        writing-mode: bt-lr;
        -webkit-appearance: slider-vertical;

        &::-webkit-slider-runnable-track, &::-webkit-slider-thumb {
          -webkit-appearance: none;
        }

        &::-webkit-slider-runnable-track, &::-moz-range-track {
          border: none;
          background: #343440;
          width: 8px;
          border-color: #343440;
          border-radius: 10px;
          box-shadow: 0 0 0 2px #3D3D4A;
        }

        &::-ms-track {
          border: none;
          background: #343440;
          width: 8px;
          border-color: #343440;
          border-radius: 10px;
          box-shadow: 0 0 0 2px #3D3D4A;
          color: transparent;
          height: 100%;
        }

        &::-ms-fill-lower, &::-ms-fill-upper, &::-ms-tooltip {
          display: none;
        }

        &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
          width: 30px;
          height: 30px;
          opacity: 0;
        }
      }

    }

JS:

let app = (() => {

  function updateSlider(element) {
    if (element) {
      let parent = element.parentElement,
        lastValue = parent.getAttribute('data-slider-value');

      if (lastValue === element.value) {
        return; // No value change, no need to update then
      }

      parent.setAttribute('data-slider-value', element.value);
      let $thumb = parent.querySelector('.range-slider__thumb'),
        $bar = parent.querySelector('.range-slider__bar'),
        pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);

      $thumb.style.bottom = `${pct}%`;
      $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight/2}px)`;
      $thumb.innerHTML = "<svg version='1.1' id='Layer_1' width='18px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512; fill: #18A074;' xml:space='preserve'><g><g><path d='M509.121,372.083l-246.17-246.175c-3.684-3.684-10.209-3.684-13.893,0L2.878,372.083c-3.838,3.838-3.838,10.055,0,13.893 c3.838,3.838,10.055,3.838,13.893,0l239.234-239.229l239.224,239.228c1.919,1.919,4.433,2.878,6.946,2.878 c2.514,0,5.028-0.959,6.946-2.878C512.959,382.139,512.959,375.921,509.121,372.083z'/></g></g></svg>";
    }
  }
  return {
    updateSlider: updateSlider
  };

})();

(function initAndSetupTheSliders() {
  const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
  inputs.forEach(input => input.setAttribute('value', '50'));
  inputs.forEach(input => app.updateSlider(input));
  // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
  inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
  inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();

Answer 1

This is much more a mathematical problem than a computer problem, which can be solved with the following calculation:

x = valorMinimo + porcentagem/100 * (valorMaximo-valorMinimo);

For example, imagine you have the range at 50%, the calculation will be:

x = 170 + 50/100 * (5000 - 170)

The result is 2585

document.getElementById("ranger").addEventListener("change", function(evt) {
  x = 170 + this.value/100 * (5000-170)
	console.log("value=" + this.value + "%");
  console.log("calculado=R$ " + x);
});

<input id="ranger" type="range" orient="vertical" min="0" max="100" />