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;
}
});
})();
Как это можно реализовать, чтоб не сломать фильтры? Буду благодарен за помощь!