JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<div class="govno">
	<div class="govno_title">
		<strong>HTML</strong>
		<span><i></i> percent</span>
	</div>
	<div class="pizda">
		<div class="zhopa"></div>
	</div>
	<div class="ebal">
		<input type="range" min="0" max="100" step="1" id="hueta">
	</div>
</div>

CSS

body {
	min-height: 100vh;
	background-color: #111b24;
	display: flex;
	justify-content: center;
	align-items: center;
}

.govno {
	width: 250px;
	display: flex;
	flex-direction: column;
}
	
.govno_title {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
	margin-bottom: 10px;
}
		
.govno_title > strong {
	font-size: 16px;
	text-transform: uppercase;
	color: white;
}

.govno_title > span {
	font-size: 14px;
	color: white
}

.pizda {
	width: 100%;
	height: 5px;
	background-image: url('https://i.imgur.com/UypqH8g.png');
	background-size: contain;
	border-radius: 3px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.zhopa {
	width: 40%;
	height: 100%;
	background-image: url('https://i.imgur.com/ykLlkq8.png');
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.ebal {
	width: 250px;
	margin-top: 20px;
}

.ebal > input {
	width: 100%;
}

JavaScript

$(document).ready( function() {
	
	const start = 25
	
	// Range init
	$('#hueta').val(start)
	$('.govno_title i').text(start)
	$('.zhopa').css('width', start+'%')
	
	
	//Range example
	$('#hueta').change( function() {
		let fooNuiGavno = $(this).val()
		$('.govno_title i').text( fooNuiGavno)
		$('.zhopa').css('width', fooNuiGavno+'%')
	})
	
	
})