JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<div id="player">&nbsp;</div> 
<div class="demo">
    <div id="slider"></div>
</div>

<button class="set" value="25">Set to 25</button>
<button class="set" value="50">Set to 50</button> 
<button class="set" value="75">Set to 75</button>

CSS

div.demo { padding: 10px; }

JavaScript

$('#slider').slider({
    change: function(event, ui) {
        if (event.originalEvent) {
            $('#player').html('manual: ' + ui.value);
        }
        else {
            $('#player').html('programmatic: ' + ui.value);
        }
    }
});

$(".set").on('click', function() {
    $('#slider').slider("value", $(this).val());
});