JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="container">
    
    <div class="row" id="time" >
      <div class="col-xs-4">
        Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,20]"/> <b>31</b>
      </div>
      <div class="col-xs-4">
        Months: <b>January</b> <input id="months" type="text"
              data-provide="slider"
              data-slider-step="1"
              data-slider-min="0" 
              data-slider-max="12"
              data-slider-tooltip="show"
              data-slider-value="[0,12]" /> <b>December</b>
      </div>
      <div class="col-xs-4">
        Years: <b>0</b> <input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/> <b>Today</b>
      </div>
    </div>
    </div>

CSS

.col-xs-4 {
  margin-bottom: 40px;
}

.slider.slider-horizontal .slider-tick-label-container {
  margin-top: 40px;
}

b {
  margin-right: 20px;
  margin-left: 20px;
}

body {
  margin-top: 60px;
}

JavaScript

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

getData = function() {
	var data = {};
  var temp = $('#days').slider().val().split(',');
  data.days = temp[0];
  temp = $('#months').slider().val().split(',');
  data.months = months[temp[0]];
  temp = $('#years').slider().val().split(',');
  data.years = temp[0];
  
  console.log(data);
}

$("#days, #years").slider({
  tooltip: 'always',
});
    
$('#months').slider({
	formatter: function(value) {
  	return months[value[0]] + " : " + months[value[1] - 1];
	}
});

$("input").on("slide", function(slideEvt) {
	getData();
});