How to create an range slider using JavaScript

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

Leave a Reply

Your email address will not be published. Required fields are marked *