Como faço para construir uma linha HTML5 graciosamente degradante?

Question

Eu gostaria de usar o <input type='range' /> de html5 para navegadores que o sustentam e se degradam para um <select /> se não. Estou usando Ruby-on-Rails, então falhando em tudo, eu poderia fazer algo como isto no lado do servidor.

Eu preferiria, no entanto, ter algo mais alinhado com a idéia de aprimoramento progressivo feito via JavaScript. Pontos de bônus se for jQuery.

Answer 1

Verificação de saída Modernizr, ele dirá se o intervalo é suportado. Acredito que a técnica é criar uma entrada de intervalo e verificar o tipo - se ainda estiver "intervalo", é suportado. Caso contrário, ele deve relatar "texto", que é o fallback em outros navegadores.

Answer 2

Primeiro detecte se o navegador pode lidar com o HTML 5, então use algo assim:

   $('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();
        }
    });

Já que você não pode usar o input[type=range] seletor eu tive que ir com o $(item).attr('min') && $(item).attr('min') Abordagem, isso ficará um pouco estranho se você tiver outros tipos de controles de entrada com esses dois atributos.