JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll-pane ui-widget ui-widget-header ui-corner-top">
    <div class="scroll-content">
        <div class="scroll-content-item ui-widget-header">1</div>
        <div class="scroll-content-item ui-widget-header">2</div>
        <div class="scroll-content-item ui-widget-header">3</div>
        <div class="scroll-content-item ui-widget-header">4</div>
        <div class="scroll-content-item ui-widget-header">5</div>
        <div class="scroll-content-item ui-widget-header">6</div>
        <div class="scroll-content-item ui-widget-header">7</div>
        <div class="scroll-content-item ui-widget-header">8</div>
        <div class="scroll-content-item ui-widget-header">9</div>
        <div class="scroll-content-item ui-widget-header">10</div>
        <div class="scroll-content-item ui-widget-header">11</div>
        <div class="scroll-content-item ui-widget-header">12</div>
        <div class="scroll-content-item ui-widget-header">13</div>
        <div class="scroll-content-item ui-widget-header">14</div>
        <div class="scroll-content-item ui-widget-header">15</div>
        <div class="scroll-content-item ui-widget-header">16</div>
        <div class="scroll-content-item ui-widget-header">17</div>
        <div class="scroll-content-item ui-widget-header">18</div>
        <div class="scroll-content-item ui-widget-header">19</div>
        <div class="scroll-content-item ui-widget-header">20</div>
    </div>
    <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
        <div class="scroll-bar"></div>
    </div>
    <div class="scroll-bar-wrap ui-widget-content ui-corner-top" id="slider2">
        <div class="scroll-bar"></div>
    </div>
</div>

CSS

.scroll-pane {
     overflow: auto;
     width: 99%;
     float:left;
 }
 .scroll-content {
     width: 2440px;
     float: left;
 }
 .scroll-content-item {
     width: 100px;
     height: 100px;
     float: left;
     margin: 10px;
     font-size: 3em;
     line-height: 96px;
     text-align: center;
 }
 .scroll-bar-wrap {
     clear: left;
     padding: 0 4px 0 2px;
     margin: 0 -1px -1px -1px;
 }
 .scroll-bar-wrap .ui-slider {
     background: none;
     border:0;
     height: 2em;
     margin: 0 auto;
 }
 .scroll-bar-wrap .ui-handle-helper-parent {
     position: relative;
     width: 100%;
     height: 100%;
     margin: 0 auto;
 }
 .scroll-bar-wrap .ui-slider-handle {
     top:.2em;
     height: 1.5em;
 }
 .scroll-bar-wrap .ui-slider-handle .ui-icon {
     margin: -8px auto 0;
     position: relative;
     top: 50%;
 }
 #slider2 {
     position: relative;
     z-index: 1;
 }

JavaScript

$(function () {

     //scrollpane parts
     var scrollPane = $(".scroll-pane"),
         scrollContent = $(".scroll-content");
     //build slider
     var scrollbar = $(".scroll-bar").slider({
         slide: function (event, ui) {
             if (scrollContent.width() > scrollPane.width()) {
                 scrollContent.css("margin-left", Math.round(
                 ui.value / 100 * (scrollPane.width() - scrollContent.width())) + "px");
             } else {
                 scrollContent.css("margin-left", 0);
             }
         }
     });

     //move things around for slider2
     slider2 = $('#slider2');
     slider2.css({
         top: (scrollContent.outerHeight() + slider2.outerHeight() * 2 - 1) * (-1)
     });
     scrollPane.css({
         'padding-top': slider2.height()
     }).height(scrollContent.height() + slider2.height() + 1);

     //append icon to handle
     var handleHelper = scrollbar.find(".ui-slider-handle")
         .mousedown(function () {
         scrollbar.width(handleHelper.width());
     })
         .mouseup(function () {
         scrollbar.width("100%");
     })
         .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>")
         .wrap("<div class='ui-handle-helper-parent'></div>").parent();
     //change overflow to hidden now that slider handles the scrolling
     scrollPane.css("overflow", "hidden");
     //size scrollbar and handle proportionally to scroll distance
     function sizeScrollbar() {
         var remainder = scrollContent.width() - scrollPane.width();
         var proportion = remainder / scrollContent.width();
         var handleSize = scrollPane.width() - (proportion * scrollPane.width());
         scrollbar.find(".ui-slider-handle").css({
             width: handleSize,
                 "margin-left": -handleSize / 2
         });
         handleHelper.width("").width(scrollbar.width() - handleSize);
     }
     //reset slider value based on scroll content position

     function...