Hoy veremos cómo plantear un campo de tipo range, que permite especificar un valor entre un máximo y un mínimo. El elemento nativo tiene una barra horizontal o vertical con un tirador para seleccionar el valor.

Normalmente estos controles se resuelven con mogollón de divs y un poco de js para gestionar los valores, control con ratón y teclado, etc.

Deberíamos usar el control nativo que ya viene con todo el tema de funcionamiento, semántica y accesibilidad solucionado.

Pasa que darle estilos no es lo más agradecido del mundo y también vamos a ver cómo resolver esta parte:

Contenidos:

• HTML: Input de typo range:
  • Atributos min, max, value, list y step
  • Datalist (no está soportado)
  • Semántica (label, form, output)
• Estilos: track, thumb y compatibilidad entre navegadores
• Javascript: Control de la barra de progreso y valor

Bonus:

• Las marcas.

[CSS-TRICKS] Styling Cross-Browser Compatible Range Inputs with CSS : https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/