JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

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;
}
.tooltip strong {
	display: block;
	padding: 2px;
}
.

JavaScript

var slider = $("#slider").noUiSlider({
    range: {
        min: 0,
        max: 100
    },
    step: 5,
    connect: true,
    start: [20, 50]
}).Link('lower').to('-inline-<div class="tooltip"></div>', sliderHandler)
.Link('upper').to('-inline-<div class="tooltip"></div>', sliderHandler);

function sliderHandler(value, handle, slider){
    var values = slider.val();
    var othertooltip = $('.tooltip').not($(this));
    if(values[1]-values[0] <= 5){
        othertooltip.hide();
        $(this).text("From: " + values[0] + '-' + values[1])
        .css({
            'width': '80px',
            'left': '-20px'
        });
    }else{
        othertooltip.show();
        $(this).text("From: " + value)
        .css({
            'width': '50px',
            'left': '-9px'
        });
    }
}