HTML Slider Range
Home
Snippets
HTML Slider Range
HTML
CSS
JS
<body> <div class="slider-container"> <h2>Adjust the Slider</h2> <input type="range" class="slider" id="rangeInput" min="0" max="100" value="50"> <p>Value: <span id="rangeValue">50</span></p> </div> </body>
body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } .slider-container { text-align: center; box-shadow: 0 0 10px #555; border-radius: 5px; padding: 20px 50px; } .slider { width: 250px; }
const rangeInput = document.getElementById("rangeInput"); const rangeValue = document.getElementById("rangeValue"); rangeInput.addEventListener("input", () => { rangeValue.textContent = rangeInput.value; });
Ad #1
Ad #2
Scroll to Top