JSFiddle - React, Tailwind, and code Playground

HTML

<div id='tijdlijnDatum'>1900</div>

<div id='slider' ></div>

CSS

.ui-slider    {background:black repeat-x bottom left; 
                border-bottom:1px solid #EBEAE5;    
                height:15px;margin:0;padding:0px; }
.ui-slider-handle {
            background:#ED6B51;
            border-bottom:1px solid #a8a79f;border-right:1px solid #a8a79f;
            height:20px;width:10px;
            margin:0; padding:0px;
            display:inline-block; }
    .ui-slider-range {
        height:10px; border-bottom:3px solid red;position:relative;
    }
#tijdlijnWrap { position:absolute; top:42px; left:0%;width:600px;background:transparent;margin-left:100px;}
#tijdlijnDatum {  position:relative; left:550px;
                         width:50px; height:12px;text-align:center;
                         background: #cbcac5;border-bottom:1px solid #EBEAE5;border-right:1px solid #EBEAE5;
                         font-size:0.8em;
                         
                         }

JavaScript

$(document).ready(function(){

// -------------------------------------------------------------
//    Tijdlijn    
        $( "#slider" ).slider({
            value:2012,
            min: 1955,
            max: 2015,
            step: 1,
            slide: function( event, ui ) {
                $( "#tijdlijnDatum" ).html( ui.value );
                l = $(ui.handle).css('left')
                

                $("#tijdlijnDatum").css('left', l)
                
            }
        });
});