JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<body>
    <div>
        <div id="map"></div>
    </div>
</body>

CSS

#map {
			width: 100%;
			height: 300px;
		}

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

		.legend {
			text-align: left;
			line-height: 18px;
			color: #555;
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}

JavaScript

var geojson;
        $(document).ready(function () {
 $.getJSON("http://vamoss.brainsen.com/API/Get.aspx?q=5", function (geoJson) {
                geojson = L.geoJson(geoJson, { style: style, onEachFeature: onEachFeature }).addTo(map);

                var sliderControl = L.control.sliderControl({
                    position: "bottomleft",
                    layer: geojson,
                    range: false,
                    showAllOnStart: false
                });

                map.addControl(sliderControl);
                sliderControl.startSlider();
            });
            });


        var map = L.map('map').setView([14, -14], 7);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-20v6611k'
        }).addTo(map);


        // control that shows state info on hover
        var info = L.control();

        info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info');
            this.update();
            return this._div;
        };

        info.update = function (props) {
            this._div.innerHTML = '<h4>Baseline demo</h4>' + (props ?
				'<b>' + props.name + '</b><br />' + props.bl + ' %'
				: 'Hover over a region');
        };

        info.addTo(map);


        // get color depending on population density value
        function getColor(d) {
            return d > 30 ? '#800026' :
			       d > 25 ? '#BD0026' :
			       d > 20 ? '#E31A1C' :
			       d > 15 ? '#FC4E2A' :
			       d > 10 ? '#FD8D3C' :
			       d > 7 ? '#FEB24C' :
			       d > 3 ? '#FED976' :
			                  '#FFEDA0';
        }

        function style(feature) {
            return {
                weight: 1,
...