JSFiddle - React, Tailwind, and code Playground

HTML

<div class="range-holder">
        
        <div id="pr-slider" class="dragdealer">
                <div class="stripe">

                <div id="green-highlight"></div>
                <div id="orange-highlight"></div>
                <div id="blue-highlight"></div>

                <div class="handle">
                  <div class="infobox">
                    <div class="titlebar"><span id="plan-holder"></span> </div>
                    <div class="innerbox">
                        <div class="info-price" id='newrange' onchange='Calculate2();'></div>
                    </div>
                  </div>  
            <div class="square">
              <span class="value"></span>
              <span class="menu-line"></span>
              <span class="menu-line"></span>
              <span class="menu-line"></span>
            </div>  
                </div>
                
              </div>
        </div>
      </div>

CSS

.range-holder{
	margin: 3em auto;
	padding: 200px 0 70px 0;
	width: 960px;
	
}

.dragdealer {
  position: relative;
  height: 30px;
  background: #FFF;
  border-radius: 8px;
  border: 1px solid #a7a7a7;
}
.dragdealer .handle {
  position: absolute;
  top: 0;
  left: 0;
}

.stripe{
	background: #ddd  url("https://dl.dropboxusercontent.com/u/4277345/codepen/stripe-bg.png") top left repeat;
	position: absolute;
	top: 0;
	left: 0;
	margin: 3px;
	height: 24px;
	border-radius: 8px;
}

	#green-highlight{position: absolute; top:0; left: 67px; height: 24px; opacity: .5; background: #8dc63f; display: none;}
	#orange-highlight{position: absolute; top:0; left: 381px; height: 24px; opacity: .5; background: #e07c00; display: none;}
	#blue-highlight{position: absolute; top:0; left: 814px; height: 24px; opacity: .5; background: #008da8; display: none;}

.square{
  position: absolute;
  top: 0;
  left: 0;	  
  margin-top: -13px;
  margin-left: -10px;
  cursor: pointer;
  width: 50px;
  height: 37px;
  background: #505054;
  border-radius: 8px;
  color: #FFF;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  padding-top: 13px;
}

.menu-line{width: 50%; margin: 2px auto; height: 5px; background: #FFF; display: block;}

.infobox{
	position: absolute;
    top: 0;
    left: 0;
    margin-top: -188px;
    margin-left: -70px;
    width: 166px;
    height: 143px;
	background: #FFF;
	padding: 0px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border: #1A9282 solid 2px;
}

	.infobox:after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 20px 23px 0;
		border-color: #FFFFFF transparent;
		display: block;
		width: 0;
		z-index: 1;
		bottom: -20px;
		left: 61px;
	}
	
	.infobox:before {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 21px 24px 0;
		border-color: #1A9282 transparent;
		display: block;
		width: 0;
		z-index: 0;
		bottom: -23px;
		left: 60px;
	}
	
	.titlebar{
		background:...

JavaScript

/*https://github.com/skidding/dragdealer*/
    (function(root,factory){if(typeof define==="function"&&define.amd){define(factory)}else{root.Dragdealer=factory()}})(this,function(){var Dragdealer=function(wrapper,options){this.bindMethods();this.options=this.applyDefaults(options||{});this.wrapper=this.getWrapperElement(wrapper);if(!this.wrapper){return}this.handle=this.getHandleElement(this.wrapper,this.options.handleClass);if(!this.handle){return}this.init();this.bindEventListeners()};Dragdealer.prototype={defaults:{disabled:false,horizontal:true,vertical:false,slide:true,steps:0,snap:false,loose:false,speed:.1,xPrecision:0,yPrecision:0,handleClass:"handle"},init:function(){this.value={prev:[-1,-1],current:[this.options.x||0,this.options.y||0],target:[this.options.x||0,this.options.y||0]};this.offset={wrapper:[0,0],mouse:[0,0],prev:[-999999,-999999],current:[0,0],target:[0,0]};this.change=[0,0];this.stepRatios=this.calculateStepRatios();this.activity=false;this.dragging=false;this.tapping=false;this.reflow();if(this.options.disabled){this.disable()}},applyDefaults:function(options){for(var k in this.defaults){if(!options.hasOwnProperty(k)){options[k]=this.defaults[k]}}return options},getWrapperElement:function(wrapper){if(typeof wrapper=="string"){return document.getElementById(wrapper)}else{return wrapper}},getHandleElement:function(wrapper,handleClass){var childElements=wrapper.getElementsByTagName("div"),handleClassMatcher=new RegExp("(^|\\s)"+handleClass+"(\\s|$)"),i;for(i=0;i<childElements.length;i++){if(handleClassMatcher.test(childElements[i].className)){return childElements[i]}}},calculateStepRatios:function(){var stepRatios=[];if(this.options.steps>1){for(var i=0;i<=this.options.steps-1;i++){stepRatios[i]=i/(this.options.steps-1)}}return stepRatios},setWrapperOffset:function(){this.offset.wrapper=Position.get(this.wrapper)},calculateBounds:function(){var...