JSFiddle - React, Tailwind, and code Playground

by Harris Brakmic

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<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>
           ...

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;

	document.addEventListener('mousemove', function(e){
		mousePos.x = e.clientX - slider.getBoundingClientRect().left;
		mousePos.x -= knob.offsetWidth / 2;
	});

	highlightTable(1);

	knob.addEventListener('mousedown', function(e) {
		//create an interval
		mouseDown = setInterval(function() {
			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 Price incrementation
				if(( requests >= 1000) && (requests < 10000)) {
					var numOfMillions = requests / 100;

					//Round to closest 10.
					var rounded =...