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="" placeholder="from" />
<input type="text" name="to" id="to" value="" placeholder="to" />

CSS

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

JavaScript

myData = [ 1,1.5,2,2.5,3,3.5,4,4.5,5,6,7,8,9,10,20,30,40,50,100,200,300,400,500 ];

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

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