JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="slider-range"></div>
<input id="amount" type="text" size="40" />

JavaScript

var slider = $("#slider-range").slider({
    range: true,
    min: 0,
    max: 200000,
    step: 500,
    values: [2500, 25000],
    slide: function (event, ui) {
            $("#amount").val("$" + ThousandSeparate(ui.values[0]) + " - $" + ThousandSeparate(ui.values[1]));
    }
});
$("#amount").val("$" + ThousandSeparate($("#slider-range").slider("values", 0)) + " - $" + ThousandSeparate($("#slider-range").slider("values", 1)));

function ThousandSeparate(val) {
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
    }
    return val;
}