Web Development Training System

Slider Tutorial Javascript Function Programming

Learn to program HTML sliders using JavaScript to spruce up the user interfacing in your web site applications and programs. <!DOCTYPE html> <html> <head> <script> function sliderChange(val) { // Use Ajax post to send the adjusted value to PHP or MySQL storage document.getElementById('sliderStatus').innerHTML = val; } </script> </head> <body> <h2>HTML5 + Javascript Slider Tutorial and Example Script</h2> <input type="range" min="0" max="100" value="50" step="2" onChange="sliderChange(this.value)" /> <br /><br /> Slider Value = <span id="sliderStatus">50</span> </body> </html>