JSFiddle - React, Tailwind, and code Playground

by Pat Dobson

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('input change',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});
})