Estoy usando un control deslizante html con fechas, específicamente fechas mensuales.

El tipo de entrada de rango no funciona muy bien con valores no enteros (aunque también se puede usar con decimales en un apuro). Como tal, estoy recurriendo a una matriz de valores para completar el rango.

Sin embargo, el rango real... del rango... es incorrecto. Supongo que aquí entra en juego un respaldo dependiente del navegador. En Chrome, parece que el valor predeterminado es 100. Como hay 61 valores, en lugar de 100, en la matriz que llena el rango, el rango se rompe después del valor 61.

Los rangos tienen valores mínimos y máximos que, en teoría, pueden resolver este problema. Los atributos mínimo y máximo para la entrada de tipo mes pueden tomar valores en la forma AAAA-MM. Sin embargo, parece que no puedo obtener valores en este formato para que funcionen en la entrada del rango de tipo. Desafortunadamente, la entrada del mes tiene soporte limitado fuera de Chrome y no proporciona el tipo de interfaz que se desea para esta aplicación.

¿Qué recurso tengo para mejorar el comportamiento de la gama?

 var values = ["2010-1", "2010-2", "2010-3", "2010-4", "2010-5", "2010-6", "2010-7", "2010-8", "2010-9", "2010-10", "2010-11", "2010-12", "2011-1", "2011-2", "2011-3", "2011-4", "2011-5", "2011-6", "2011-7", "2011-8", "2011-9", "2011-10", "2011-11", "2011-12", "2012-1", "2012-2", "2012-3", "2012-4", "2012-5", "2012-6", "2012-7", "2012-8", "2012-9", "2012-10", "2012-11", "2012-12", "2013-1", "2013-2", "2013-3", "2013-4", "2013-5", "2013-6", "2013-7", "2013-8", "2013-9", "2013-10", "2013-11", "2013-12", "2014-1", "2014-2", "2014-3", "2014-4", "2014-5", "2014-6", "2014-7", "2014-8", "2014-9", "2014-10", "2014-11", "2014-12", "2015-1"]; var points = document.getElementById('points'); let rangevalue0 = document.getElementById('rangevalue0'); points.max = values[values.length - 1]; points.oninput = function() { rangevalue0.innerHTML = values[this.value]; };

 <input type="range" id="points" min="2010-01" max="2015-1" step="1" /> <br /><output id="rangevalue0">Select Date</output>