JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>

</style>
</head>
<body>
<div class="form-inline">
  
<input type="text" id="startDate" name="startDate" value="" /> to <input type="text" id="endDate" name="endDate" value="" /> 

  <p>&nbsp;</p>
  
  <div id="slider"></div>
  
    </div>  
</body>
</html>

CSS

body {
   font: 10pt Arial, sans-serif; 
    padding:20px;
}
#slider { width: 100px; z-index: 0; }

/*Date slider input fields*/
.form-inline > input {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px 6px 6px 6px;
    box-shadow: none;
    padding: 6px;
    width:35px;
}
.form-inline > input:focus {
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

JavaScript

$(function() {

    $min = 1700;
    $start_value = 1850;
    $end_value = (new Date()).getFullYear() + 1;
    $('#startDate').val($start_value);
    $('#endDate').val($end_value);
    $('#slider').slider({
        range: true,
        max: $end_value,
        min: $min,
        values: [$start_value, $end_value],
        slide: function(event, ui) {
            $('#startDate').val(ui.values[0]);
            $('#endDate').val(ui.values[1]);
        }
    });

});