<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Input Range with Dynamic Label</title>
</head>
<body>
	<div class="range-wrap">
		<div class="range-value" id="rangeV"></div>
		<input id="range" type="range" min="200" max="800" value="200" step="1">
	</div>
</body>
</html>
body{
	min-height: 100vh;
	padding: 0 10vh;
	margin: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
input[type=range] {
	-webkit-appearance: none;
	margin: 20px 0;
	width: 100%;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	animate: 0.2s;
	background: #03a9f4;
	border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 4px 0 rgba(0,0,0, 1);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #03a9f4;
}
.range-wrap{
	width: 500px;
	position: relative;
}
.range-value{
	position: absolute;
	top: -50%;
}
.range-value span{
	width: 30px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background: #03a9f4;
	color: #fff;
	font-size: 12px;
	display: block;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 6px;
}
.range-value span:before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 10px solid #03a9f4;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	margin-top: -1px;
}
const
	range = document.getElementById('range'),
	rangeV = document.getElementById('rangeV'),
	setValue = ()=>{
		const
			newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
			newPosition = 10 - (newValue * 0.2);
		rangeV.innerHTML = `<span>${range.value}</span>`;
		rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
	};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.