How to create an range slider using JavaScript

<!DOCTYPE html>
<html>
	<style>
		.range-slider {
			background: #eee;
			width: 300px;
			height: 30px;
		}
		
		p {
			border: 1px solid #eee;
			padding: 5px 10px;
			width: fit-content;
			fomt-weight: bold;
		}
	</style>
	<body>
		<div class="range">
			<input type="range" min="1" max="100" value="50" id="slider" class="range-slider" >
			<p>Value: <span id="p"></span></p>
		</div>
		<script>
			let slider = document.getElementById("slider");
			let result = document.getElementById("p");
			result.innerHTML = slider.value;
			slider.oninput = function() {
				result.innerHTML = this.value;
			}
		</script>
	</body>
</html>

Leave a Reply