JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timeline_scroller">
    <div id="timeline_content">
        <div class="items active">
            <span class="item">1</span>
            <span class="item">2</span>
            <span class="item">3</span>
            <span class="item">4</span>
            <span class="item">5</span>
            <span class="item">6</span>
            <span class="item">7</span>
            <span class="item">8</span>
            <span class="item">9</span>
            <span class="item">10</span>
        </div>
    </div>
</div>
<div id="slider"></div>

CSS

#timeline_scroller {height:290px; background:#ececec;}
#timeline_content {position:relative; height:290px; overflow:hidden;}
#timeline_content .items {width:3020px; height:290px; white-space:nowrap; position:absolute;}
#timeline_content .items .item {width:300px; height:288px; background:#ccc; border:1px solid #000; margin:0; padding:0; border-collapse:collapse; float:left;}


#slider {display:block; width:300px; margin-top:12px; background:#eee;}
#slider a.ui-slider-handle {display:block; outline:none; width:38px; height:38px; margin-left:-19px; background:#000; position:relative;}
#slider a:hover.ui-slider-handle, #slider a.ui-state-active {background-position:0 -38px;}

JavaScript

$("#slider").slider({
    animate: 3000,
    min: 0,
    max: $("#timeline_content .items").width(),
    change: handleSliderChange,
    slide: handleSliderSlide
});    
    
function handleSliderChange(e, ui) {
    $("#timeline_content").stop().animate({scrollLeft: ui.value}, scrollbar.slider("option", "animate"));
}
    
function handleSliderSlide(e, ui) {
    $("#timeline_content").stop().animate({scrollLeft: ui.value}, scrollbar.slider("option", "animate"));
}


$('#slider').slider({'value': 1000});