JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<div class="container">
    <div class="content">
        <ul>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
            <li>test5</li>
            <li>test6</li>
            <li>test7</li>
            <li>test8</li>
            <li>test9</li>
            <li>test10</li>
            <li>test11</li>
            <li>test12</li>
            <li>test13</li>
            <li>test14</li>
            
        </ul>    
    </div>
    <div class="slider"></div>
</div>

CSS

.container{
    width:200px;
    border:1px solid;
    height:80px;
    overflow:hidden;
    margin:200px;
}

.content{
    float:left;background:grey;width:80%;overflow:hidden;
}

.slider{
    float:right;
    background:green;
    width:19%;
    height:80px;
}

JavaScript

$(document).ready(function(){
   var content = $(".content");
   var slider = $(".slider");
    
    //set random height for testing purpose
    $(".content").css("height", Math.floor((Math.random(100)*280)));
    
    //set slider
    slider.slider({
        orientation: "vertical",
        value: 100,
        slide: function(e, ui){
            //well this doesn't make much sense...            
            offset = -1 * (content.height() - ((content.height() * ui.value) / 100));

            content.css("margin-top", offset);
        }
    });
});