Year Range Input sliders

Community Help
1

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

image
image797×79 2.14 KB

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

Thanks!

1 Like
2

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"
1 Like
3

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
4

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

2 Likes
5

Thank you @tophtucker @duaneatat