JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script>

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">

  <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>

CSS

.scroll-pane { overflow: auto; width: 500px;  margin: 20px auto; }

  .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%; }

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 );

        }

      },
      change: 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 );

        }

      }

    });



    //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

   ...