JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<br>
<br>
<input type="range" min="0" max="100" value="45">

<div class="tooltip"></div>

CSS

.tooltip {
  display: none;
  width: 50px;
  height: 50px;
  background: lightblue;
  border-radius: 5px;
  position: absolute;
}

.tooltip::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid lightblue;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 10px);
}

JavaScript

const inp = document.querySelector('input');
const tooltip = document.querySelector('.tooltip');

inp.addEventListener('mouseenter', showTooltip);
inp.addEventListener('mouseout', hideTooltip);
inp.addEventListener('mousemove', moveTooltip);
inp.addEventListener('input', updateTooltip);

function showTooltip(e) {
  updateTooltip();
  moveTooltip(e);
	tooltip.style.display = 'block';
}
function hideTooltip() {
	tooltip.style.display = 'none';
}

function moveTooltip(e) {
	const rect = tooltip.getBoundingClientRect()
  const xCorrection = rect.width / 2; 
  const yCorrection = rect.height + 10;
  
  tooltip.style.top = e.pageY - yCorrection + 'px'
  tooltip.style.left = e.pageX - xCorrection + 'px'
}

function updateTooltip() {
	tooltip.textContent = inp.value + '%';
}