Question

I am trying to create dynamic HTML5 range input to control volume in my game.

The idea is to have it over my canvas.

Here is what the code looks like :

    var slider = document.createElement('input');
    slider.id = "volume";
    slider.type = 'range';
    slider.min = 0;
    slider.max = 1;
    slider.value = 0.5;
    slider.step = 0.1;
    document.body.appendChild(slider);

The slider appears, but not the good way. On chrome, just the cursor appears and not the entire slider, and I can’t move it. On the inspector the element exist and is okay.

    <input id="volume" type="range" min="0" max="1" step="0.1"> on chrome

On firefox, it just doesn’t appear.

<input id="volume" type="range"> on firefox

So I’m just wondering why my slider doesn’t appear correctly. Is there anything I’m doing wrong ?

PS : I already tried modifying node orders or zIndex and stuff like that.

Thanks 🙂

Answer 1

Your code works correctly in chrome. Consider this example:
http://jsfiddle.net/webdevel/Qmvam/

It might happens if you are trying to create element dynamically before DOM is ready.

Firefox doesnt support it yet.