¿Cómo creo un rango de HTML5 degradante?

Question

Me gustaría utilizar el <input type='range' /> de HTML5 para los navegadores que lo admitan y degradar a un <select /> de no ser así. Estoy usando Ruby-on-Rails, así que, al fallar todo lo demás, podría hacer algo como this en el lado del servidor.

Preferiría, sin embargo, tener algo más en línea con la idea de la mejora progresiva a través de Javascript. Puntos de bonificación si es JQuery.

Answer 1

Eche un vistazo a Modernizr, le dirá si el rango es compatible. Creo que la técnica consiste en crear una entrada de rango y verificar su tipo; si todavía es "rango", entonces es compatible. De lo contrario, debería informar el "texto", que es la alternativa en otros navegadores.

Answer 2

Primera 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 de 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.