Missing values not omitted in `Inputs.range`

[jaanli]

Currently constructing a slider using:

const uniqueYears = await db.query("SELECT DISTINCT year FROM data WHERE year BETWEEN 2010 AND 2022 ORDER BY year").then(data => data.map(d => d.year));
const yearRange = [uniqueYears[0], uniqueYears[uniqueYears.length - 1]];
const yearInput = Inputs.range(yearRange, {step: 1, value: uniqueYears[0], width: 150});
const selectedYear = Generators.input(yearInput);
yearInput.querySelector("input[type=number]").remove();

Example: https://jaanli.github.io/american-community-survey/new-york-area

However, the year 2020 is missing in the Census' American Community Survey due to the coronavirus, so this shows up as undefined:

Documentation: https://observablehq.com/framework/inputs/range

Is there a way to handle / omit missing values in Observable Framework inputs?

This is super cool and letting me think about gentrification in a whole new way (looking at income changes across these 169+ census-defined microdata areas over the past 13 years).

[Fil]

Not a bug, and not directly related to Framework :)

You can use the validate option like so:

validate: (input) => input.value !== "2020",

[mbostock]

You can also use the scrubber technique where the input’s value is an index into the array of allowed values.

[jaanli]

Awesome, thank you so much @Fil !

Passing validate: (input) => input.value !== "2020" to the Inputs.range function works to some degree.

However, this leads to an incorrect screen state (hence why I'm not sure whether this is a bug)—it allows the user to create an invalid input visually (that is thankfully not passed down to the query level to cause a software bug):

In this screenshot, the range slider is actually set to the "2020" value, but does not display this to the user (as this input has been invalidated by the validate option.

You can see this in action here: https://jaanli.github.io/american-community-survey/new-york-area

Will try @mbostock 's scrubber technique suggestion next—thank you!! 🙏

P.S. Wasn't sure whether this was Framework-related as I learned about this option from the Framework documentation: https://observablehq.com/framework/inputs/range