non numeric range or slider to select dates

Community Help
1

Looking for a quick solution to implementing a range view or slider that uses an array of strings for selectable items instead of a numerical range.

I have a data set that is keyed by a year string, IE. “1889”, the problem is the list of years is not continuous, there are a few gaps.

I thought the range view might have a callback function that could skip over the missing years but nothing like that is mentioned in the API.

thanks,

Scott

1 Like
2

Have you seen or tried Scrubber / Mike Bostock / Observable?

You could do something like this:

Scrubber(["1889", "1890", "1891", "1893"], {delay: 1000})

The {delay: 1000} part is the delay in milliseconds between items if you click Play. Let me know if you don’t want the Play/Pause button — you could definitely do something similar but simpler without that.

Edit: One limitation of this approach is that 1891 and 1893 would appear adjacent on the slider, same as 1890 and 1891; there’s no indication that a year was skipped. One can imagine a slider with proportional “notches” on every valid possible value, linearly positioned like tick marks on a timeline, that would only let you drag to those notches. That’s doable too, but it would have to be totally custom — I don’t think you could do it with a native HTML <input type="range"> slider (which Mike’s Scrubber and the other official inputs use). Or maybe you could hack it, if you listened for the end of the drag and then programmatically set its value to the nearest valid notch.

1 Like
3 
viewof date = {
  const form = html`<form><input name=i min=0 max=${dates.length-1} step=1 type=range>`
  form.i.value = form.value;
  form.i.oninput = () => form.value = dates[form.i.value] ;
  return form;
}
1 Like
4

hellonearthis,

that was perfect!

thanks,

Scott

1 Like
5

The html form.input is working well, except for one small issue. I want to provide a selected/initial value. I tried this

viewof year2display = {
const form = html<form><input name=i min=0 max=${tempData.length-1} step=1 type=range >
form.i.value = form.value = “1902”;
form.i.oninput = () => form.value = tempData[form.i.value][“origin”] ;
return form;
}

Setting form.value = “1902”, which worked great! This happens to be the last year in the array. If I use “1836” , the first year in the array, the value of year2display comes out correct but the slider is in the incorrect position. No matter what value I set form.value to, the slider is full right?
I’m assuming this is pilot error, but I can’t see any other way of setting a selected value so the slider is in the corresponding position.

thanks,

Scott

6

:smiley:

viewof date = {
  const form = html`<form><input name=i  min=0 max=${dates.length-1} step=1 type=range>`
  form.i.value = form.value || 0;
  form.value = dates[form.i.value];
  form.i.oninput = () => form.value = dates[form.i.value] ;
  return form;
}

If the form.value is null then I set it to the index I want to default to (0),
Then I update the forms value so date contains the default.

Maybe I should use ?? instead of ||
I’m still learning, always learning :smiley:

viewof date = {
  const form = html`<form><input name=i  min=0 max=${dates.length-1} step=1 type=range>`
  form.i.value = form.value ?? 0;
  form.value = dates[form.i.value];
  form.i.oninput = () => form.value = dates[form.i.value] ;
  return form;
}