JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="wrapper">
    <div id="slider-range"></div>
</div>

CSS

.wrapper {
    padding: 10px;
}
.sidecar {
    position: absolute;
    top: 50px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #f00;
}

JavaScript

$("#slider-range").slider({
    min: 0,
    max: 500,
    value: 250
});
$('.ui-slider-handle').append('<span class="sidecar"></span>');