JSFiddle - React, Tailwind, and code Playground

by brightertools

HTML

<div class="sliderHolder">
<input type="range" min="0" max="100" id="slider" />
</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;
  }
}

JavaScript

jQuery('#slider').on('mouseup',function(){
  //jQuery('.tt').remove();
	//var slider = jQuery('#slider');
	//var sliderValue = jQuery('#slider').val();
  //jQuery('.sliderHolder').append('<div class="tt">' + sliderValue + '</div>');
  //var sliderWidth = slider[0]['clientWidth'];
  //var sliderPos = slider[0]['valueAsNumber'] / slider[0]['max'];
  //var ttPos = sliderWidth * sliderPos;
  //ttPos = ttPos + 'px';
  //jQuery('.tt').css({'left':ttPos});
});
jQuery('#slider').on('mousemove',function(e){
//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'});
})