Input type Range showing textbox instead of slider

Question

Here is my code:

<input type="range" name="slider" id="slider" value="5" min="0" max="10" step="1" />

All HTML5 mobile browsers I have tested this in (iPhone 4, Android, iPad) render this as input type=text. Why won't this render a slider?

Answer 1

Not all browsers support it yet. You can always use http://www.modernizr.com/ to test if the browser supports it and then use http://jqueryui.com/ as a fallback. Try something like this.

var initSlider = function() {  
    $('input[type=range]').each(function() {  
        var $input = $(this);  
        var $slider = $('<div id="' + $input.attr('id') + '" class="' + $input.attr('class') + '"></div>');  
        var step = $input.attr('step');  

        $input.after($slider).hide();  

        $slider.slider({  
            min: $input.attr('min'),  
            max: $input.attr('max'),  
            step: $input.attr('step'),  
            change: function(e, ui) {  
                $(this).val(ui.value);  
            }  
        });  
    });  
};