JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<h1>Select Price Range</h1>
<div id=slider></div>
<div id="input-format"></div>

CSS

.noUi-connect{
background-color: #DAA520;
}

JavaScript

$(document).ready(function() {
var slider = $('#slider');
var sliderEventListener = noUiSlider.create(slider[0], {
	start: [200000, 1000000],
	range: {
		'min': [0 ],
    '50%': [1000000],
		'max': [ 40000000 ]
	},
  tooltips: true,
  step: 10000,
  connect: true,
  format: wNumb({
		decimals: 0,
		thousand: ',',
		prefix: '£',
	}),
});
sliderEventListener.on('change',function( values, handle ){
       alert(values[0] + ", " + values[1]);
       })
});