JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<form>
  <label for="amount">Price range:</label>
  <input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <div id="slider-range"></div>
</form>
<div id="stuff"></div>

JavaScript

$(function() {
   $("#slider-range").slider({
     range: true,
     min: 0,
     max: 500,
     values: [75, 300],
     slide: function(event, ui) {
       $("#amount").val(ui.values[0] + " - " + ui.values[1]).change();
     }
   });
   $("#amount").val($("#slider-range").slider("values", 0) +
     " - " + $("#slider-range").slider("values", 1)).change();
 });

 amt = document.getElementById("amount");
 var amtChange = function() {
   document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
 };
 amt.onchange = amtChange;