¿Cómo construyo un rango HTML5 con gracia que degrada?

Question

Me gustaría utilizar el <input type='range' /> de HTML5 para los navegadores que lo soportan y degradar a un <select /> si no. Estoy usando Rubí-on-Rails, por lo que no todo lo demás, lo que podía hacer algo así como este en el lado del servidor.

Yo preferiría, sin embargo, para tener algo más en línea con la idea de mejora progresiva hecho a través de Javascript. Los puntos de bonificación si se trata de jQuery.

Answer 1

Modernizr , que le dirá si se admite gama. Creo que la técnica es crear una entrada de gama y comprobar su tipo - si todavía es "gama", entonces es compatible. De lo contrario, debería informar de "texto" que es el repliegue en otros navegadores.

Answer 2

En primer lugar detectar si el navegador puede manejar HTML 5 a continuación, utilizar algo como esto:

   $('input').each(function (i, item) {
        if ($(item).attr('min') !== undefined && $(item).attr('max') !== undefined) {
            var select = document.createElement("SELECT");
            $(select).attr('name', $(item).attr('name'));
            $(select).attr('id', $(item).attr('id'));
            $(select).attr('disabled', $(item).attr('disabled'));
            var step = 1;
            if ($(item).attr('step') !== undefined) {
                step = parseFloat($(item).attr('step'));
            }

            var min = parseFloat($(item).attr('min'));
            var max = parseFloat($(item).attr('max'));
            var selectedValue = $(item).attr('value');
            for (var x = min; x <= max; x = x + step) {
                var option = document.createElement("OPTION");
                $(option).text(x).val(x);
                if (x == selectedValue) { $(option).attr('selected', 'selected'); }
                $(select).append(option);
            };
            $(item).after(select);
            $(item).remove();
        }
    });

Como no se puede utilizar el selector input[type=range] tuve que ir con el enfoque $(item).attr('min') && $(item).attr('min'), esto va a ser un poco raro si tiene otros tipos de controles de entrada con esos dos atributos.