JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/css/bootstrap-slider.min.css">
<div class="container">
<div class="container" style="margin-top:50px;">
<div class="col-md-3">

<div class="chart" id="graph" data-percent="0"></div>

<Span>My total Value :</Span>

<input type="text" id="TotalAllocation" class="TotalAllocation" value="0" disabled/>

<!--span id="ex6CurrentSliderValLabel">Interest and Service: <span id="ex6SliderVal2">3000</span></span>  <br-->
<span id="totalData"><!--TOTAL DATA:--> <span id="TheSumMB">0 MB</span></span>
</div>


</div>
		<div class="row">
			<div class="col-xs-12" id="demoContainer">
				<!-- start-->
				<div class="col-md-6">
					<div class="container-holder" style="margin-top:50px;">
						<div class="col-md-8">
							<h4>Internet</h4>
						</div>
						<div class="col-md-4 tright">
							<input class="valTwo" disabled id="valTwo" type="text" value="0"> hr / <span id="totalBrowse"><span id="webBrowse">0</span></span>
						</div>
						<div>
							<input data-slider-id='ex1Slider2' id="ex2" type="text">
						</div>
					</div>
					<div class="container-holder" style="margin-top:50px;">
						<div class="col-md-8">
							<h4>Emails</h4>
						</div>
						<div class="col-md-4 tright">
							<input class="valOne" disabled id="valOne" type="text" value="0"> hr / <span id="totalEmail"><span id="emailValue">0</span></span>
						</div>
						<div>
							<input data-slider-id='ex1Slider' id="ex1" type="text">
						</div>
					</div>
				</div><!-- end -->
			</div>
		</div>
	</div>

CSS

div.chart {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
.chart span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

.chart input {
    width: 200px;
}



.slider.slider-horizontal {
    width: 100% !important;
    height: 20px;
}

input[disabled] {
  text-align: right;
    cursor: default;
    width: 30%;
    border: 0px;
    background: transparent;
}

.tright{text-align:right;}

.slideSmoth .slider-handle.round {
    border-radius: 50%;
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
    transition: all 0.5s ease;
}

.slideSmoth .slider.slider-horizontal .slider-track {
    height: 15px; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);}
  
.slideSmoth .slider-track, .slideSmoth .slider-handle,.slider-selection.tick-slider-selection{
  background: rgba(251, 251, 251, 0.8);
}


.slideSmoth .slider-handle {margin-top: -3px !important;}

.slideSmoth .slider-tick{display:none;}

#TotalAllocation{width:200px;font-size:50px;display:none;}
#TheSumMB{width:200px;font-size:50px;}

JavaScript

var webBrowse = 40;
var emailValue = 1;
var realValues = [10, 20, 30, 40, 50];
var labelValues = ['10 MB', '20 MB', '30 MB', '40 MB', '50 MB'];
var realValues2 = [0, 8, 16, 24];
var labelValuesTwo = ['LOW', 'LOW', 'MEDIUM', 'HIGH'];
var ex1 = $('#ex1').slider({
	value: 0,
	max: 4,
	min: 0,
	step: 1,
	formatter: function(val) {
		return labelValues[val];
	}
});
var ex2 = $('#ex2').slider({
	value: 0,
	max: 3,
	min: 0,
	step: 1,
	formatter: function(val) {
		return labelValuesTwo[val];
	}
});
$(ex1).change(function(data) {
	$("#valOne").val(realValues[data.value.newValue]);
	var valOne = $("#valOne").val();
	var valTwo = $("#valTwo").val();
	var totalBrowse = parseInt(valTwo) * webBrowse;
	var totalEmail = parseInt(valOne) * emailValue;
	var total = valOne + realValues2[data.value.newValue];
	var totalData = parseInt(totalEmail) + parseInt(totalBrowse);
	$("#ex6SliderVal2").text(total);
	$("#TheSumMB").text(totalData + '' + ' MB');
	$("#TotalAllocation").val(totalData);
	$("#webBrowse").text(totalBrowse + '' + ' MB');
	$("#emailValue").text(totalEmail + '' + ' MB');
});
$(ex2).change(function(data) {
	$("#valTwo").val(realValues2[data.value.newValue]);
	var valOne = $("#valOne").val();
	var valTwo = $("#valTwo").val();
	var totalBrowse = parseInt(valTwo) * webBrowse;
	var totalEmail = parseInt(valOne) * emailValue;
	var total = valOne + realValues2[data.value.newValue];
	var totalData = parseInt(totalEmail) + parseInt(totalBrowse);
	$("#ex6SliderVal2").text(total);
	$("#TheSumMB").text(totalData + '' + ' MB');
	$("#TotalAllocation").val(totalData);
	$("#webBrowse").text(totalBrowse + '' + ' MB');
	$("#emailValue").text(totalEmail + '' + ' MB');
});

var el = document.getElementById('graph'); // get canvas

var options = {
    percent:  el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    rotate: el.getAttribute('data-rotate') || 0
}

var canvas =...