# Year Range Input sliders

**URL:** <https://talk.observablehq.com/t/year-range-input-sliders/6390>\
**Category:** Help\
**Created:** [March 24, 2022, 12:03pm UTC](https://talk.observablehq.com/t/year-range-input-sliders/6390 "2022-03-24T12:03:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![arky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/arky/32/4486_2.png) [@arky](https://talk.observablehq.com/u/arky)\
**Post date:** [March 24, 2022, 12:03pm UTC](https://talk.observablehq.com/t/year-range-input-sliders/6390/1 "2022-03-24T12:03:23Z")

</div>

Is it possible to create a range input to select a year range similar to what you see here:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/9a27b92e7777f46f2c96217891191b39d2d7bbf4.png)

I think currently you can have only one slider in input range ([Range Input / Observable Inputs / Observable / Observable](https://observablehq.com/@observablehq/input-range?collection=@observablehq/inputs)).

Thanks!

---

<div class="post-metadata">

**Author:** ![duaneatat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/duaneatat/32/5654_2.png) [@duaneatat](https://talk.observablehq.com/u/duaneatat)\
**Post date:** [March 24, 2022, 1:38pm UTC](https://talk.observablehq.com/t/year-range-input-sliders/6390/2 "2022-03-24T13:38:01Z")

</div>

Observable doesn’t yet have a built-in interval input but you can use Fabian Iwand’s really nice implementation of what you’re looking for here: [Range Slider / Fabian Iwand / Observable](https://observablehq.com/@mootari/range-slider)

```nohighlight
viewof yearInterval = rangeSlider({
  min: 1980,
  max: 2022,
  value: [1992, 2012],
  title: 'Select year interval',
  step: 1
})

```

```nohighlight
import {rangeInput} from "@mootari/range-slider"

```

---

<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:** [March 24, 2022, 1:44pm UTC](https://talk.observablehq.com/t/year-range-input-sliders/6390/3 "2022-03-24T13:44:05Z")

</div>

The standard Inputs.range only has a single handle (because it wraps the standard HTML `<input type=range />`).

But anyone can make their own input, and user Fabian Iwand has a great custom two-sided range input here:

> **[Range Slider](https://observablehq.com/@mootari/range-slider)**
>
> Jump to:
> Examples | Usage | Changelog This notebook implements a themable range input for lower and upper bounds. Also provided is an optional light wrapper that mimics the widget APIs from Jeremy Ashkenas' Inputs notebook. Import the slider factory...

It predates the official Inputs library, but there’s a newer work-in-progress version at the bottom that more closely matches the official Inputs, and works with Inputs.form and such.

---

<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:** [March 24, 2022, 1:45pm UTC](https://talk.observablehq.com/t/year-range-input-sliders/6390/4 "2022-03-24T13:45:01Z")

</div>

oops duane answered while i was writing. hi @duaneatat ! glad we agree lol

---

<div class="post-metadata">

**Author:** ![arky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/arky/32/4486_2.png) [@arky](https://talk.observablehq.com/u/arky)\
**Post date:** [March 25, 2022, 3:57am UTC](https://talk.observablehq.com/t/year-range-input-sliders/6390/5 "2022-03-25T03:57:10Z")

</div>

Thank you @tophtucker @duaneatat