Search code examples
javascriptphphtmlliveinstant

I want my JavaScript on my php/html website to update live and instantaneously

This might sound a bit dumb, but how did they get the slider : http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input#volume

That number (%) updates instantaneously to the movement of your mouse when you slide the dot.

I was wondering for my own 'learning purposes' how that is possible since with the same code that they provide on my website, it won't work...

;) Thnx!

UPDATE

My code:

<label for=fader>Volume</label>
    <input type=range min=0 max=100 value=50 id=fader step=1 onchange="outputUpdate(value)">
    <output for=fader id=volume>50%</output>
    </output>
    <script>
        function outputUpdate(vol) {
            document.querySelector('#volume').value = vol+"%";
        }
    </script>
Solution

  • This will work:

     <html>
 <label for=fader>Volume</label>
 <input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
 <output for=fader id=volume>50%</output> 
 <script> 
    function outputUpdate(vol) { 
       document.querySelector('#volume').value = vol+"%"; }
 </script>
 </html>

    You need to change onchange to oninput, they don't use what they tell you.