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">
<div>
    <div id="slider" class="slider"></div>
    <button id="button">Change</button>
</div>
<pre id="output"></pre>

CSS

.slider {
    width: 80%;
    margin: 1em;
}
a:focus {
    outline: none;
}

JavaScript

$('#slider').slider({
    min:1,
    max:50,
    animate: true,
    value:1,
    change: function(e, ui) {
        var msg = e.originalEvent && ("Const - Trigger: "+e.originalEvent.type);
        $('#output').append((msg || 'Const - No Orignal Event')+"\n");
    }
}).bind('slidechange',function(e, ui) {
    var msg = e.originalEvent && ("Bind - Trigger: "+e.originalEvent.type);
    $('#output').append((msg || 'Bind - No Orignal Event')+"\n");    
});

$('#button').button().click(function() {
    var n = Math.floor(Math.random() * 50);
    $('#slider').slider('option','value',n);
});