# non numeric range or slider to select dates

**URL:** <https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626>\
**Category:** Help\
**Created:** [September 27, 2021, 11:02pm UTC](https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626 "2021-09-27T23:02:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![scottyd](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/scottyd/32/5454_2.png) [@scottyd](https://talk.observablehq.com/u/scottyd)\
**Post date:** [September 27, 2021, 11:02pm UTC](https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626/1 "2021-09-27T23:02:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [September 27, 2021, 11:54pm UTC](https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626/2 "2021-09-27T23:54:09Z")

</div>

Have you seen or tried [Scrubber / Mike Bostock / Observable](https://observablehq.com/@mbostock/scrubber)?

https://observablehq.com/embed/@mbostock/scrubber?cells=viewof+date%2Cdates

You could do something like this:

```auto
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.

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [September 28, 2021, 12:09am UTC](https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626/3 "2021-09-28T00:09:14Z")

</div>

```auto
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;
}

```

> **[Range Slider](https://observablehq.com/@hellonearthis/range-slider)**
>
> Returns item indexed into array. based on: https://observablehq.com/@mbostock/nonlinear-slider

> **[Nonlinear Slider](https://observablehq.com/@mbostock/nonlinear-slider)**
>
> Inspired by Matthew Conlen’s Idyll post. As two linked sliders, one nonlinear and the other linear: As a standlone nonlinear slider:

---

<div class="post-metadata">

**Author:** ![scottyd](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/scottyd/32/5454_2.png) [@scottyd](https://talk.observablehq.com/u/scottyd)\
**Post date:** [September 28, 2021, 3:59am UTC](https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626/4 "2021-09-28T03:59:00Z")

</div>

hellonearthis,

that was perfect!

thanks,

Scott

---

<div class="post-metadata">

**Author:** ![scottyd](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/scottyd/32/5454_2.png) [@scottyd](https://talk.observablehq.com/u/scottyd)\
**Post date:** [September 28, 2021, 4:46pm UTC](https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626/5 "2021-09-28T16:46:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [September 29, 2021, 12:10am UTC](https://talk.observablehq.com/t/non-numeric-range-or-slider-to-select-dates/5626/6 "2021-09-29T00:10:07Z")

</div>

😃

```auto
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 😃

```auto
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;
}

```