JSFiddle - React, Tailwind, and code Playground

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>
<span class="b"></span>

CSS

body {
    padding: 100px;
}
.ui-slider-handle {
    outline: none;
}
.ui-tooltip {
    background: url("http://www.psdgraphics.com/file/light-wooden-background.jpg") scroll 0 0 transparent !important;
    background-size:2000px 60px;
    background-repeat:no-repeat;
}
.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
}

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');
}
$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [20],
    slide: function (event, ui) {
        slide(event, ui);
        $(".b").html(ui.value);
         $(ui.value).val($('.b').html());
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});