JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<div id="controls">
    <button id="play"><div id="traingle"></div></button>
    <div id="slider"></div>
</div>

<!-- <table><tr><td><button id="play">Play</button></td><td><div id="slider"></div></td></tr></table>
 -->

CSS

#controls{
    display: flex; 
    background: #EFEFEF;
    padding: 20px;
    border: 1px solid #A3A3A3;
}

#play, #slider{
    display: inline-block;
}

#play{
    background-color: #A3A3A3;
    height: 20px;
    width: 20px;
    outline: none;
    border: 0px;
    border-radius: 50%;
}

#traingle{
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid white;    
    margin-left: 2px;
}

#slider{
    margin-left: 20px;
    margin-right: 20px;
    width: 80%;
}

.ui-slider-tick-mark{
    display: inline-block;
    position: absolute;
    top: -4px;
    margin-top: 13px;
    font-size: 10px;
}

.ui-slider-tick-mark::before{
    content: " ";
    display: inline-block;
    width: 1px;
    background: black;
    height: 5px;
}

.ui-slider-horizontal .ui-state-default {
    background-color: white;
    width: 10px;
    height: 10px;
    outline: none;
    border: 5px solid #A3A3A3;
    border-radius: 50%;
    margin-top: 2px;
}

JavaScript

$(function() {
    
    var date = [ "2010", "2011", "2012", "2013", "2014", "2015" ];    
    var paused = false;
    
    $( "#slider" ).slider({
        range: "min",
        min: 0,
        max: date.length - 1,
        step: 1,
        value: 0,
        create: function( event, ui ) {
            setSliderTicks(event.target);
        },
        slide: function(event, ui){  // during sliding
            paused = true;
            if (typeof sliderIncrementer != 'undefined') window.clearInterval(sliderIncrementer);
        },
        stop: function(){  // after sliding
            console.log(date[$('#slider').slider("option", "value")]);
        }
    });
    $('.ui-widget-content').css('border','0px');
    
    $("#play").click(function(){
        paused = false;
        var sliderIncrementer = window.setInterval(function(){
            if(paused === false){
                var value = $('#slider').slider("option", "value");
                $("#slider").slider( "value", value + 1 );
            }
        }, 3000);
    });
    
    function setSliderTicks(el) {
        var $slider =  $(el);
        var max =  $slider.slider("option", "max");    
        var min =  $slider.slider("option", "min");    
        var temp = min;
        var step = $slider.slider("option", "step"); 
        var spacing =  100 / (max - min);
        
        for (var i = 0; i < max-min+1 ; i++) {
            $('<span class="ui-slider-tick-mark"> <br/>'+ date[i] +'</span>').css('left', (spacing * i) +  '%').css('text-align', 'center').css('margin-left', '-10px').appendTo($slider); 
            //temp += step;
        }
    }
    
});