JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide-content">
    Hello world! This will be an awesome slider
</div>

CSS

.phone-highlight-slider {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.phone-highlight-word {
    display: block;
    float:left;
    padding-right: 4px;
    padding-left: 4px;
}

.phone-highlight-selected {
    background-color: #c2d3e3;
}

.phone-highligher {
    position: absolute;
    margin: 0 auto;
}

.phone-highlight-handle {
    position: absolute;
    background: url('http://s.skimresources.com/img/slider.png');
    width: 10px;
    height: 30px;
    margin-top: 0px;
    z-index: 999;
    cursor: pointer;
}

JavaScript

(function ( $ ) {
    
    $.fn.phoneHighlight = function( opts ) {
        var text = $.trim(this.text()),
            words = text.split(" "),
            base = $('<div class="phone-highlight-slider"></div>'),
            highlighted = opts.highlighted || [0, words.length -1],
            coordinates = [],
            max_x, min_x,
            onchange = opts.onchange || false,
            selector1, selector2, selector1_pos, selector2_pos, i, mouseDown = false, mouseX;
        
        positionSelectors = function(base){
            var first_selected = $('.phone-highlight-selected:first');
            
            selector1_pos = first_selected.position().left - 5;
            base.find('div[rel=selector_left]').css({"left": selector1_pos}) ;
            
            var last_selected = $('.phone-highlight-selected:last');
            
            selector2_pos = last_selected.position().left + last_selected.outerWidth() - 5;
            base.find('div[rel=selector_right]').css({"left": selector2_pos});
        }
        
        updateSelection = function(highlighted){
            var index = 0;
            $('.phone-highlight-word').each(function(){
                if (index >= highlighted[0] && index <= highlighted[1]){
                    if (!$(this).hasClass("phone-highlight-selected")){
                        $(this).addClass("phone-highlight-selected");
                    }
                } else {
                    $(this).removeClass("phone-highlight-selected");
                }
                
                index++;
            });
        }
        
        getHighlightedText = function(highlighted){
            var index, words = [];
            
            index = 0;
            $('.phone-highlight-word').each(function(){
                if (index >= highlighted[0] && index <= highlighted[1]){
                    words.push($(this).text());
                }
                
                index++;
            });
            
       ...