JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />
</head>
<body>
    <div class="container" style="overflow: auto; width: 300px">
        <table cellpadding="0" cellspacing="0" border="0" id="tblStaff" style="width: 400px">
            <tr>
                <td class="ds_hd" >
                    ola<div class="slider"></div>ola
                </td>
            </tr>
        </table>
    </div>
</body>

CSS

.container {
 overflow: auto;
 width: 300px;
 margin: 20px; 
 padding:10px 0;
 background-color: #cccccc;   
    text-align:center;
}
.slider {
    width:80%;
}

JavaScript

$(function(){
    
    $('.slider').slider({
        range: true,
        min: 0,
        max: 10,
        values: [2, 7]
    });
    
});