JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<div id="slider" style="margin:50px"></div>

JavaScript

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();
$("#slider").slider({
    value: 500,
    min: 0,
    max: 1000,
    step: 50,
    slide: function(event, ui) {
        tooltip.text(ui.value);
    },
    change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
    tooltip.show()
}, function() {
    tooltip.hide()
})