JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="slider"></div>
<button id="reset">reset to max</button>
<button id="change-max">change max to 30</button>
<button id="get-value">get current value</button>

CSS

body {
    padding: 40px;
}

#slider {
    margin-bottom: 10px;
}

JavaScript

$('#slider').slider();
$('#reset').click(function() {
    $('#slider').slider('value', $("#slider").slider("option", "max"));
});
$('#change-max').click(function() {
    $('#slider').slider('option', 'max', 30);
    $('#reset').click();
});
$('#get-value').click(function() {
    alert($('#slider').slider('value'));
});