JQuery с использованием автонумерации с диапазоном ползунка

Question

Привет, я сейчас пытаюсь реализовать библиотеку autoNumeric Js с вводом диапазона формы.

И значение ввода текста autoNumeric и ввод диапазона должны всегда быть одинаковыми на страницезагрузить и когда одно из входных значений изменилось.

До этого я использовал только числовой ввод, и все работало замечательно

var slider1 = document.getElementById("price_min");
var slider2 = document.getElementById("price_max");
var output1 = document.getElementById("price_min_value");
var output2 = document.getElementById("price_max_value");
output1.value = slider1.value; // Display the default slider value
output2.value = slider2.value;
output1.oninput = function() {
  slider1.value = this.value;
}
output2.oninput = function() {
  slider2.value = this.value;
}
// Update the current slider value (each time you drag the slider handle)
slider1.oninput = function() {
  output1.value = this.value;
}
slider2.oninput = function() {
  output2.value = this.value;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Min: <input type="number" id="price_min_value" min="0" max="100000000000" value="0" /></div>
<input type="range" id="price_min" class="form-control" min="0" max="100000000000" value="0" name="price_min">
<div>Max: <input type="number" id="price_max_value" min="0" max="100000000000" value="100000000000" /></div>
<input type="range" id="price_max" class="form-control" min="0" max="100000000000" value="100000000000" name="price_max">

Теперь я хочу использовать разделитель тысяч, так как эти данные представляют цену, поэтому я попытался использовать автонумерацию.

Моя текущая реализация выглядит следующим образом

const priceOptions = {
  currencySymbol: "₫",
  currencySymbolPlacement: "s",
  decimalCharacter: ",",
  decimalPlaces: 3,
  digitGroupSeparator: ".",
  emptyInputBehavior: "always",
  minimumValue: "0",
  outputFormat: "number"
}
new AutoNumeric('#price_min_value', priceOptions);
new AutoNumeric('#price_max_value', priceOptions);
var slider1 = document.getElementById("price_min");
var slider2 = document.getElementById("price_max");
var output1 = document.getElementById("price_min_value");
var output2 = document.getElementById("price_max_value");
output1.value = slider1.value; // Display the default slider value
output2.value = slider2.value;
output1.oninput = function() {
  slider1.value = this.value;
}
output2.oninput = function() {
  slider2.value = this.value;
}
// Update the current slider value (each time you drag the slider handle)
slider1.oninput = function() {
  output1.value = this.value;
}
slider2.oninput = function() {
  output2.value = this.value;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.5.4"></script>
<div>Min: <input id="price_min_value" type="text" value="0"></div>
<input type="range" id="price_min" class="form-control" min="0" max="100000000000" value="0" name="price_min">
<div>Max: <input id="price_max_value" type="text" value="100000000000"></div>
<input type="range" id="price_max" class="form-control" min="0" max="100000000000" value="100000000000" name="price_max">

Как вы можете видеть, он работает не так, как я ожидал, формат происходит только тогда, когда я наведите курсор мыши на него, а значение ползунка диапазона переместится в серединукогда я пытаюсь ввести число, значение ввода текста также не меняется, когда я использую ползунок, также, когда я нахожу указатель мыши над вводом текста, значение автоматически возвращается к старому предыдущему значению, также значение числа don 'чтобы получить формат, когда он был изменен с помощью ползунка

Я хочу, чтобы он вел себя как оригинальный первый фрагмент, значение числа и диапазона всегда совпадают друг с другом при вводе и при загрузке

Я не нашелЛюбой ответ на эту тему еще, надеюсь, кто-нибудь может помочь!