JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="miniscorebar">
<div class="slider"></div>
<div class="miniscorebar">
<div class="slider"></div>
<div class="miniscorebar"> 
<div class="slider"></div>

JavaScript

$(document).ready(function() {
	$('.slider').slider({
		value: 5,
		min: 1,
		max: 10,
		step: 1,
		slide: function( event, ui ) {
            //change text for current's slider handle only
			$(this).children(".ui-slider-handle").text(ui.value);
			switch(ui.value){
				case 1: { $(this).css('background', 'darkred'); break;}
				case 2: { $(this).css('background', 'red'); break;}
				case 3: { $(this).css('background', 'orange'); break;}
				case 4: { $(this).css('background', 'gold'); break;}
				case 5: { $(this).css('background', 'yellow'); break;}
				case 6: { $(this).css('background', '#AAFF00'); break;}
				case 7: { $(this).css('background', 'lime'); break;}
				case 8: { $(this).css('background', 'cyan'); break;}
				case 9: { $(this).css('background', '#00AAFF'); break;}
				case 10: { $(this).css('background', 'blue'); break;}
			}
		}
	});
	//$(".ui-slider-handle").val($('.slider').slider( "value" ));
});