JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.css">
<div id="slider" style="margin-top: 50px"></div>

CSS

.tooltip{
	display: block;
	position: absolute;
	border: 1px solid #D9D9D9;
	font: 400 12px/12px Arial;
	border-radius: 3px;
	background: #fff;
	top: -43px;
	padding: 5px;
	left: -9px;
	text-align: center;
	width: 50px;
}

JavaScript

$("#slider").noUiSlider({
	    range: {
	        min: 0,
	        max: 100
	    },
	    step: 5,
	    connect: true,
	    start: [ 20, 50 ]
});

$("#slider").Link('lower').to('-inline-<div class="tooltip"></div>', function(value){
    $(this).text(  "From: "+value );
});


$("#slider").Link('upper').to('-inline-<div class="tooltip"></div>', function(value){
		$(this).text(  "From: "+value );
	});