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">

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

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

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