JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.css">
Slider:

<div id="slider"></div>

<input type="text" name="from" id="from" value="10000" />

CSS

* {
    font-family:Arial;
    font-size:20px;
}
body {
    padding:20px;
}
#slider { margin:20px }

JavaScript

myData = [10e3, 100e3, 250e3, 500e3, 1e6, 5e6];

		slider_config = {
			range: false,
			min: 0,
			max: myData.length - 1,
			step: 1,
			slide: function( event, ui ) {
                    // Set the real value into the inputs
                    $('#from').val( myData[ ui.value ] );
			},
            create: function() {
                    $(this).slider('value',0,0);
            }
		};

		// Render Slider
		$('#slider').slider(slider_config);