Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<div class="star-rating-container">
		<!-- 星の表示 -->
		<div class="star-rating">
		  <div class="star-rating-top" style="width: 70%" id="starRatingRaito"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
		  <div class="star-rating-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
		</div>
		<!-- スライダー -->
		<div>
		  <input type="range" class="star-rating-slider" id="starRatingSlider" min="0" max="50" step="5">
		</div>
	</div>

	<script>
		function setValue(ev) {
			var value = ev.target.value;
			console.log('change:', value);
			document.getElementById('starRatingRaito').style.width = (value * 2) + '%';
		}
		document.getElementById('starRatingSlider').addEventListener('input', setValue);
		document.getElementById('starRatingSlider').addEventListener('change', setValue);
		document.getElementById('starRatingSlider').addEventListener('click', setValue);
	</script>

	<style>
		.star-rating-container {
			position: relative;
			display: inline-block;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		.star-rating-container * {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		/**
			スライダー.
		*/
		.star-rating-slider {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			opacity: 0.01;
		}
		input[type="range"]::-webkit-slider-thumb {
		    width: 35px;
		    height: 35px;
		}
		/**
		*	星の表示.
		*/
		.star-rating {
			display: inline-block;
		  color: #999999;
		  font-size: 50px;
		  margin: 0 auto;
		  position: relative;
		  padding: 0;
		  text-shadow: 0px 1px 0 #a2a2a2;
		  pointer-events: none;
		}
		.star-rating span {
			padding: 0 0.1em;
		}
		.star-rating-top {
		  color: #4fc2cd;
		  padding: 0;
		  position: absolute;
		  z-index: 1;
		  display: block;
		  top: 0;
		  left: 0;
		  overflow: hidden;
		}
		.star-rating-bottom {
		  padding: 0;
		  display: block;
		  z-index: 0;
		}
		body {
		  margin: 50px;
		  text-align: center;
		  font-family: 'Open Sans', sans-serif;
		  background: #f5f5f5;
		}
	</style>


</body>
</html>