js Разбить число на разряды в input + добавить текст

Помогите, пожалуйста! Есть два инпута и слайдер цены. Нужно сделать так, чтобы числа в инпутах разбивались на разряды и добавлялся символ «₽».

<div class="range-slider">
  <span class="test_filter_price">
    <input type="number" name="Filter[price_min]" value="10000" min="0" max="200000" />
    <input type="number" name="Filter[price_max]" value="200000" min="0" max="200000" />
  </span>
  <input name="Filter[price_min]" value="10000" min="0" max="200000" step="1000" type="range" />
  <input name="Filter[price_max]" value="200000" min="0" max="200000" step="1000" type="range" />
  <svg width="100%" height="24">
     <line x1="4" y1="0" x2="300" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line>
  </svg>
</div>

И такой JS:

(function() {

var parent = document.querySelector(".range-slider");
if (!parent) return;

var
  rangeS = parent.querySelectorAll("input[type=range]"),
  numberS = parent.querySelectorAll("input[type=number]");

rangeS.forEach(function(el) {
  el.oninput = function() {
    var slide1 = parseFloat(rangeS[0].value),
        slide2 = parseFloat(rangeS[1].value);

    if (slide1 > slide2) {
       [slide1, slide2] = [slide2, slide1];
       // var tmp = slide2;
       // slide2 = slide1;
       // slide1 = tmp;
    }

    numberS[0].value = slide1;
    numberS[1].value = slide2;
  }
});

numberS.forEach(function(el) {
  el.oninput = function() {
    var number1 = parseFloat(numberS[0].value),
      number2 = parseFloat(numberS[1].value);

    if (number1 > number2) {
      var tmp = number1;
      numberS[0].value = number2;
      numberS[1].value = tmp;
    }

    rangeS[0].value = number1;
    rangeS[1].value = number2;

  }
});

})();

Как это можно реализовать, чтоб не сломать фильтры? Буду благодарен за помощь!


Ответы (0 шт):