JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider-range-price-sales"></div>
<div class="priceContainer">
    <div class="left">
        <input type="text" id="minPrice" name="minPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" />
    </div>
    <div class="right">
        <input type="text" id="maxPrice" name="maxPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" />
    </div>
</div>

CSS

body {padding: 50px;}

JavaScript

/* SALES SLIDER */
$("#slider-range-price-sales").slider({
    range: true,
    min: 0,
    max: 2000000,
    step: 50000,
    values: [100000, 2000000],
    slide: function (event, ui) {
        $("#minPrice").val("£" + addCommas(ui.values[0].toString()));
        $("#maxPrice").val("£" + addCommas(ui.values[1]));
    }
});

$("#minPrice").val("£" + $("#slider-range-price-sales").slider("values", 0));
$("#maxPrice").val("£" + $("#slider-range-price-sales").slider("values", 1));


function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}