JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timeline">
        <div id="dragger" class="ui-draggable" style="left: 93px;"></div>
    <div id="layer1">
        <p class="layer">layer1</p>
        <div style="left: 16px;" class="keyframe 16px ui-draggable"></div>
        <div style="left: 197px;" class="keyframe 197px ui-draggable"></div>
        <div style="left: 432px;" class="keyframe 432px ui-draggable"></div>
    </div>
    <div id="layer2">
        <p class="layer">layer2</p>
        <div style="left: 26px;" class="keyframe 16px ui-draggable"></div>
        <div style="left: 97px;" class="keyframe 197px ui-draggable"></div>
        <div style="left: 532px;" class="keyframe 432px ui-draggable"></div>
    </div>
</div>
<div id="something"></div>

CSS

#timeline {
height:20px;
position:relative;
width:620px;
    font-size:10px;
    font-family:Arial;
}

.keyframe {
background:#000033;
border-top:1px solid #333333;
display:inline-block;
height:6px;
position:absolute;
width:6px;
margin:5px 0 0 0;
}

#dragger {
background:red;
height:323px;
position:absolute;
width:20px;
}
#layer2 {
border-bottom:1px solid #333333;
border-top:1px solid #333333;
height:20px;
margin:10px 0 0;
}
#layer1 {
border-bottom:1px solid #333333;
border-top:1px solid #333333;
height:20px;
margin:10px 0 0;
}
#something { margin-top: 20px }

.layer {
left:581px;
margin:4px;
position:absolute;
}

JavaScript

$(document).ready(function(){

    function SelectClosestKeyframes(slider, event, ui, keyframesContainer) {
                    var this_left = parseInt($(slider).css("left").split("px")[0],10);
                    var closest_left = [null,0], closest_right = [null,0];
                    var keyframes = $("div.keyframe", keyframesContainer);
        
                    keyframes.each(function(index) {
                        keyframes.css("background-color","").removeClass("blue").removeClass("yellow");
                            var t = $(this);
                            var offset = parseInt(t.css("left").split("px")[0],10) - this_left;
                            
    
                            if (offset >= 0) {
                                    if (closest_right[0] == null || offset < closest_right[1]) {
                                            closest_right[0] = $(this);
                                            closest_right[1] = offset;
                                    }
                            }

                            else {
                                    if (closest_left[0] == null || offset > closest_left[1]) {
                                            closest_left[0] = $(this);
                                            closest_left[1] = offset;
                                    }
                            }


                    $(closest_left[0]).addClass("blue").css("background-color","blue");
                    $(closest_right[0]).addClass("yellow").css("background-color","yellow");      
               });
        }
    
 $("#dragger").draggable({

            containment: '#timeline',
            axis: 'x',
            drag: function(event, ui) {

                SelectClosestKeyframes(this, event, ui, $("#layer1"));
                SelectClosestKeyframes(this, event, ui, $("#layer2"));

                    }
                
            
    });

});