JSFiddle - React, Tailwind, and code Playground

by Edward

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>
</div>
<pre id="output"></pre>

CSS

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

JavaScript

$('#slider').slider({
    min:1,
    max:50,
    animate: true,
    values:[1,5],
    change: function(e, ui) {
        $('#output').append("Changed via Handle "+$(ui.handle).attr('id')+"\n");
    }
}).find('.ui-slider-handle').first().attr('id','first').end()
    .last().attr('id','last');