JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/hot-sneaks/jquery-ui.css">
<h1>Hello World!</h1>
<div class="ScaleControl"></div>
<button class="mybutton"></button>

CSS

.ScaleControl {
    margin-right:25px; 
    margin-bottom: 20px;
    margin-top:10px;
    margin-left:10px;
    float:left;
    width: 270px;   
}
.mybutton {
    display:inline-block; 
    position: absolute; 
    width:26px; 
    height:26px; 
}

JavaScript

$("h1").html("Loaded...");

$(".mybutton").button( {
    icons: { primary: 'ui-icon-arrow-4-diag' }
} );
                          
$('.ScaleControl').slider({
    value: 100,
    min: 5,
    max: 100,
    step: 1/*,
    create: function (event, ui)
    {
      setTimeout(function ()
      {
        var slider = $(".ScaleControl");
        $("mybutton").position({
         of: slider,
         my: 'left bottom',
         at: 'right bottom',
         collision: 'none',
         offset: "10 10"
        });
      }, 250);
    }*/
});