JSFiddle - React, Tailwind, and code Playground

by Kamil

HTML

<div class="container">

  <div class="sliderHolder">
  <input type="range" min="0" max="100" id="slider" />
  </div>

</div>

SCSS

.sliderHolder{
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid silver;
  #slider{
    width: 100%;
  }
  .tt{
    position: absolute;
    border: 1px solid grey;
    top: 20px;
    margin: 5px;
  }
}

.container {
  width: 500px;
  margin: 0 auto;
}

JavaScript

var dragging = false;
jQuery('#slider').on('input',function(){
  dragging = true;
});
jQuery('#slider').on('mouseup',function(){
  dragging = false;
});
jQuery('#slider').on('mousemove',function(e){
if (dragging == false)
{
	return;
}
jQuery('.tt').remove();
var mouseX = e.clientX - 14;
  jQuery('.tt').remove();
  var slider = jQuery('#slider');
	var sliderValue = jQuery('#slider').val();
   jQuery('.sliderHolder').append('<div class="tt">' + sliderValue + '</div>');
  jQuery('.tt').css({'left':mouseX + 'px'});
})