JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/trontastic/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<div>
    <div id="slider1" class="slider"></div>
    <div id="slider2" class="slider ui-helper-hidden"></div>
    <button id="btn-set">Set (Broke)</button>
    <button id="btn-set2">Set (Fix?)</button>
    <button id="btn-toggle">Toggle Visible</button>
</div>

CSS

.slider {
    width: 80%;
    margin: 1em;
}

JavaScript

$('#slider1').slider({
    min:1,
    max:50,
    animate: true,
    value:1
});

$('#slider2').slider({
    min:1,
    max:58,
    animate: true,
    value:1
});

$('#btn-set').button().click(function() {
    var n = Math.floor(Math.random() * 35);
    var d = Math.floor(Math.random() * 15)+5;
    $('#slider2')
        .slider('values',[n,n+d]);
});

$('#btn-set2').button().click(function() {
    var n = Math.floor(Math.random() * 35);
    var d = Math.floor(Math.random() * 15)+5;
    var a = $('#slider2').is(':visible');
    $('#slider2')
 
        .slider('value',n)
        .slider('option','animate',true);
});

$('#btn-toggle').button().click(function() {
    $('#slider2').toggle();
});