JSFiddle - React, Tailwind, and code Playground

by HAWKEYE

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class = "row">

<div class = "col-md-12">
<div class="wrapper4">
<p style = "text-align:center">
Subject Skill
</p>
<input id="ex16" data-slider-id='ex16Slider' type="text" data-slider-min="0" data-slider-max="100"  data-slider-step="1" style="width: 100%; text-align:center;"/>

 </div>
</div>

<div class = "col-md-12">
<div class = "col-md-4">

<div class="wrapper">
<hr />
<p>
Technical / Analytical
</p>

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" style="text-align: center"/>
    <hr />
    <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
    
</div>
</div>

<div class = "col-md-4">

<div class="wrapper">
<hr />
<p>
Problem Solving
</p>

    <input id="ex6" data-slider-id='ex6Slider' type="text"...

CSS

.wrapper {
    padding : 0px;
    margin-top: 0px;
}

.wrapper4 {
    padding : 0px 30px 0px 30px;
    margin-top: 10px;
}


#ex2Slider, #ex3Slider, #ex4Slider, #ex5Slider, #ex17Slider{
  margin-right :20px;
}

#ex1Slider .slider-selection {
	background: #ff6666;
}

#ex1Slider .slider-handle {
	background: #ff6666;
}
#ex2Slider .slider-handle {
	background: #ff6666;
}#ex3Slider .slider-handle {
	background: #ff6666;
}
#ex4Slider .slider-handle {
	background: #ff6666;
}#ex5Slider .slider-handle {
	background: #ff6666;
}

#ex7Slider, #ex8Slider, #ex9Slider{
  margin-right :20px;
}

#ex6Slider .slider-selection {
	background: #60AFFE;
}

#ex6Slider .slider-handle {
	background: #60AFFE;
}
#ex7Slider .slider-handle {
	background: #60AFFE;
}#ex8Slider .slider-handle {
	background: #60AFFE;
}
#ex9Slider .slider-handle {
	background: #60AFFE;
}#ex10Slider .slider-handle {
	background: #60AFFE;
}

#ex12Slider, #ex13Slider, #ex14Slider{
  margin-right :20px;
}

#ex11Slider .slider-selection {
	background: #577A3A;
}

#ex11Slider .slider-handle {
	background: #577A3A;
}
#ex12Slider .slider-handle {
	background: #577A3A;
}#ex13Slider .slider-handle {
	background: #577A3A;
}
#ex14Slider .slider-handle {
	background: #577A3A;
}#ex15Slider .slider-handle {
	background: #577A3A;
}

#ex16Slider .slider-selection {
	background: #FFA824;
}

#ex16Slider .slider-handle {
	background: #FFA824;
}

JavaScript

$('#ex1').slider({
    value : 26,
	formatter: function(value) {
		return 'ABCD: ' + value;
	}
});


$('#ex2').slider({
    value : 2,
    tooltip_position:'bottom',
     reversed : true,
	formatter: function(value) {
		return 'A: ' + value;
	}
});


$('#ex3').slider({
    value : 6,
    reversed : true,
	formatter: function(value) {
		return 'B: ' + value;
	}
});


$('#ex4').slider({
    value : 8,
     reversed : true,
	formatter: function(value) {
		return 'C: ' + value;
	}
});


$('#ex5').slider({
    value : 4,
     reversed : true,
	formatter: function(value) {
		return 'D: ' + value;
	}
});

$('#ex17').slider({
    value : 2,
     reversed : true,
	formatter: function(value) {
		return 'D: ' + value;
	}
});

$('#ex18').slider({
    value : 5,
     reversed : true,
	formatter: function(value) {
		return 'D: ' + value;
	}
});


$('#ex6').slider({
    value : 24,
	formatter: function(value) {
		return 'EFGH: ' + value;
	}
});


$('#ex7').slider({
    value : 9,
     reversed : true,
	formatter: function(value) {
		return 'E: ' + value;
	}
});


$('#ex8').slider({
    value : 5,
    reversed : true,
	formatter: function(value) {
		return 'F: ' + value;
	}
});


$('#ex9').slider({
    value : 3,
     reversed : true,
	formatter: function(value) {
		return 'G: ' + value;
	}
});


$('#ex10').slider({
    value : 7,
     reversed : true,
	formatter: function(value) {
		return 'H: ' + value;
	}
});


$('#ex11').slider({
    value : 34,
	formatter: function(value) {
		return 'EFGH: ' + value;
	}
});


$('#ex12').slider({
    value : 8,
     reversed : true,
	formatter: function(value) {
		return 'E: ' + value;
	}
});


$('#ex13').slider({
    value : 5,
    reversed : true,
	formatter: function(value) {
		return 'F: ' + value;
	}
});


$('#ex14').slider({
    value : 10,
     reversed : true,
	formatter: function(value) {
		return 'G: ' + value;
	}
});


$('#ex15').slider({
    value : 11,
     reversed : true,
	formatter: function(value) {
		return 'H: ' +...