JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<input id="amount" type="text" size="40" style="border:none" />
<!--div>Price Range: <span id="amount"></span></div-->
<div id="slider-range"></div>

JavaScript

var slider = $("#slider-range").slider({
  range: true,
  min: 0,
  max: 100,
  step: 1,
  values: [64, 78],
  slide: function(event, ui) {
    $("#amount").val("£ " + commafy(ui.values[0]) + "  - £ " + commafy(ui.values[1]));
    $("#newpricemin").val(commafy(ui.values[0]));
    $("#newpricemax").val(commafy(ui.values[1]));

  }
});
$("#amount").val("£ " + commafy($("#slider-range").slider("values", 0)) +
  "  - £ " + commafy($("#slider-range").slider("values", 1)));

function commafy(val) {
  /* Total range 0 - 3,000,000 */
  /* 50% from 0 to 250,000, what have left (2,750,000) */
  /* So, final dividing */
  var toPresent = 0;
  if (val < 50) {
    toPresent = (val / 50) * 250000;
  } else {
    toPresent = 250000 + (val - 50) / 50 * 2750000;
  };
  return String(toPresent).split("").reverse().join("")
    .replace(/(.{3}\B)/g, "$1,")
    .split("").reverse().join("");
}