JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<div class="row" style="margin-top:20px;">
			<div class="col-md-9 col-md-offset-2">
				<div id="slider" class="slider">
					<div id="slider-fill" class="slider-fill">
						<div id="knob" class="knob">
							<div class="line"></div>
							<div class="line"></div>
							<div class="line"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row" style="margin-top:20px;">
            <div class="col-md-9 col-md-offset-2">
				<div class="pull-left">
					<h4>Total Requests</h4>
					<span class="requests"><span id="requests"></span></span>
				</div>
				<div class="pull-right" style="display:block;">
					<h4>Total Price</h4>
					<span class="price"><span class="glyphicon glyphicon-gbp currency"></span><span id="price"></span>.00</span>
				</div>
			</div>
		</div>
		<div class="row" style="margin-top:20px;">
            <div class="col-md-9 col-md-offset-2">
				<table id="payment-table" class="table" style="margin-top:20px;">
					<thead>
						<th>Monthly Requests</th>
						<th>Additional</th>
					</thead>
					<tbody>
						<tr>
							<td>FREE</td>
							<td></td>
						</tr>
						<tr>
							<td>100,000</td>
							<td>£20</td>
						</tr>
						<tr>
							<td>1 MILLION</td>
							<td>£10</td>
						</tr>
						<tr>
							<td>10 MILLION</td>
							<td>£1</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

CSS

.slider {
    cursor: default;
    position:relative;
    background-color: #808080;
    width: 100%;
    height: 12px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
    /*Prevent highlight selection*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.line {
    position: relative;
    display:block;
    background-color: #808080;
    border-radius: 2px;
    width: 2px;
    height: 10px;
    float:left;
    margin-left:2px;
    left: 5.2px;
    top:7px;

}

.slider-fill {
    background-color: #4090DE;
    width:0px;
    height:12px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
}

.knob {
    position:relative;
    top: -7px;
    left: 0px;
    height:25px;
    width:25px;
    background-color: #E8E8E8;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
    box-shadow: 0px 0px 10px black;
}

.currency {
    font-size: 30px;
}

.requests {
    font-size: 30px;
}
.price {
    position:relative;
    font-size:35px;
    top: -5px;
}

JavaScript

var slider = document.getElementById("slider")
	var sliderFill = document.getElementById("slider-fill")
	var knob = document.getElementById("knob")

	var mouseDown;
	var mousePos = {x:0};
	var knobPosition;

	var minPrice = 20;
	var price = 0;
	var minRequests = 50;
	var requests = 50 + ",000";

	var incrementSpeed = 2;
	var incrementModifier = 20;
	var incrementValue = 1;

	var minMillionCount = 1;
	var millionCount = 1;

	var previousRequestAmount = 0;

	document.getElementById("price").innerHTML = price;
	document.getElementById("requests").innerHTML = requests;

	highlightTable(1);

	document.addEventListener('mousemove', function(e) {
		if(mouseDown) {
			updateSlider(e);
		}
	})

	function updateSlider(event) {
		mousePos.x = event.clientX - slider.getBoundingClientRect().left;
		mousePos.x -= knob.offsetWidth / 2;

		if(mousePos.x < 0) {
			knob.style.left = "0px";
			sliderFill.style.width = "0px";
			price = 0;
			requests = 50 + ",000";
			document.getElementById("price").innerHTML = price;
			document.getElementById("requests").innerHTML = requests;
			return
		}
		if(mousePos.x > slider.offsetWidth - 20) {
			return
		}
		sliderFill.style.width = mousePos.x +  10 + "px";
		knob.style.left = mousePos.x + "px";
        
		//Increase requests by using X position of mouse
		incrementSpeed = mousePos.x / incrementModifier;
		requests = minRequests + (mousePos.x * incrementSpeed);
		//Round to nearest 1
		requests = Math.round(requests / incrementValue) * incrementValue;
		if (requests >= 1000){
			var m = requests/ 1000;
			m = Math.round(m / 1) * 1;
            
			//Problem, lower the modifier depending on requests
            
			incrementModifier = 20 * 0.95;
			document.getElementById("requests").innerHTML = m + " million";
			//Adjust Prices
			if(( requests >= 1000) && (requests < 10000)) {
				var numOfMillions = requests / 100;
				//Round to closest 10.
				//10 * number of millions
				var rounded = Math.round(numOfMillions / 10) * 10;
				price...