Year Range Input sliders

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

I think currently you can have only one slider in input range (Range Input / Observable Inputs / Observable / Observable).

Thanks!

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

viewof yearInterval = rangeSlider({
  min: 1980,
  max: 2022,
  value: [1992, 2012],
  title: 'Select year interval',
  step: 1
})
import {rangeInput} from "@mootari/range-slider"

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:

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.

1 Like

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

2 Likes

Thank you @tophtucker @duaneatat