CODEWITHSUNDEEP
javascripthtmlforms
Stumbler
Stumbler

Reputation: 2146

Min/max month values with HTML range

I am using a html slider with dates, specifically monthly dates.

The range input type does not play very well with non-integer values (though can be used also with decimal in a pinch). As such I am resorting to an array of values to populate the range.

However the actual range... of the range... is incorrect. I assume that a browser dependent fallback comes into play here. On Chrome it seems to default to 100. As there are 61 values, rather than 100, in the array that populates the range, the range breaks after the 61st value.

Ranges have min and max values that can in theory solve this issue. Min and max attributes for input of type month can take in values in the form YYYY-MM. However I seem to be unable to get values in this format to work in input of type range. The month input unfortunately has limited support outside of Chrome and does not provide the type of interface wanted for this application.

What recourse do I have to improve the range's behavior?

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>

Upvotes: 1

Views: 770

Answers (1)

Peter Haight
Peter Haight

Reputation: 1924

points.max needs to be the index of the max value, not the max value itself. You're setting points.max to '2015-1', but try setting it to 60 instead:

points.max = values.length - 1;

Upvotes: 1

Related Questions