JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<title>jQuery UI Slider - Slider scrollbar</title>
<body>
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
        <div class="scroll-content">
            <div class="scroll-content-item ui-widget-header"></div>
            <div class="scroll-content-item ui-widget-header">
                <div class="arabadiv" onclick="yukle()" style="width:100px; height:100px; background-color: darkviolet "></div>
            </div>
            <div class="scroll-content-item ui-widget-header">
                <div style="width:100px; height:100px; background-color:red"></div>
            </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...

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%;
}
/* force a height so the tabs don't jump as content height changes */
 #tabs .tabs-spacer {
    float: left;
    height: 200px;
}
.tabs-bottom .ui-tabs-nav {
    clear: left;
    padding: 0 .2em .2em .2em;
}
.tabs-bottom .ui-tabs-nav li {
    top: auto;
    bottom: 0;
    margin: 0 .2em 1px 0;
    border-bottom: auto;
    border-top: 0;
}
.tabs-bottom .ui-tabs-nav li.ui-tabs-active {
    margin-top: -1px;
    padding-top: 1px;
}

JavaScript

$(function () {
    $("#tabs").tabs();

    // fix the classes
    $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
        .removeClass("ui-corner-all ui-corner-top")
        .addClass("ui-corner-bottom");

    // move the nav to the bottom
    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
});

$(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);
            }
        }
    });

    //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 resetValue() {
        var...