JSFiddle - React, Tailwind, and code Playground

by ykay

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="slider"></div>

CSS

body {
    padding: 100px;
}
.ui-slider-handle {
    outline: none;
}

JavaScript

function slide(event, ui) {
    // Allow time for exact positioning
    setTimeout(function () {
        $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find('span');
    handles.eq(0).tooltip({
        animation: false,
        placement: 'top',
        trigger: 'manual',
        container: handles.eq(0),
        title: start
    }).tooltip('show');
    handles.eq(1).tooltip({
        animation: false,
        placement: 'top',
        trigger: 'manual',
        container: handles.eq(1),
        title: end
    }).tooltip('show');
}
$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});