How to modify existing inputs.

Community Help
1

Hello. I’m using inputs for the first time, and am trying to adopt the range slider from this source:
@mootari/range-slider@1781. It works perfectly well, but I would like to change functionality for the “displayed” date range just to the right of the slider. I have reviewed its existing options in the documentation.

My question: in broad strokes, how does one go about customizing these inputs? Do you fork the existing git repo for the input, modify it, and then somehow access your own version? Or is there a less heavy lift than that? I’m looking around for a “so you want to make your own input…” type tutorial, but not sure which content to go with. Any advice appreciated!

In case anyone wonders: I want to display the select range of dates, where the start, end integer pair from the slider reference a set of dates from another date object array by position. So I sort of need to pass through the date values rather than calculate them using the slider’s existing functions.

2

Hi @ouonomos

If you want to create your own variation of @mootari’s range slider, the workflow is that you should fork their notebook, and then modify it in your own notebook. The full implementation is in the notebook (not in GitHub), see the ‘Implementation’ section of that notebook.

This is true in general for code on Observable. Sometimes people load external libraries and you can certainly create your own and load it (or even attach it to your notebook as a file attachment). See this documentation for more details.

But most of the re-use on Observable is done through forking existing code that exists on the platform and modifying it, or simply importing from the notebooks where those functions are implemented.

Also, if you want to learn more about Inputs specifically, I would recommend that you read about Views here.

1 Like
3

Sorry, but I have to intervene here: there should be absolutely no need to fork. The Range Slider notebook was designed as a library with several components and options for customization.

I will try to provide an example later on. In the meantime, please take a closer look at the notebook’s documentation, specifically the format option for the interval input, and the display option for the deprecated rangeSlider input.

1 Like
4

@ouonomos Can you share a link to your notebook?

You may also want to take a look at the documentation for notebook imports within Observable:

5

Hello @mootari ; thanks for your reply and sorry I’ve been unable to respond more quickly while traveling.

Here’s a minimal example of the issue I’m trying to solve with your range slider…
Say I have a “broken” array of 3 days, meaning that they aren’t a continuous array of 1 day intervals:

// create sample date array
datetestarray=[];
['2022-01-01','2022-01-03','2022-01-06'].forEach(i => {datetestarray.push(new Date(i));})

Then the problem I am trying to solve is to display to the right of the date range slider only those values that exist in the array. Being able to just pass them through, with formatting if needed, would be ideal.

My attempt to do this so far:

viewof range1=rangeSlider({
  min: 0, //hard min
  max: 2, // hard max
  step: 1, // allowed step 
  format: d=> datetestarray[d], // trying to pass value but it gets re-formatted as different value
  value: [datetestarray[0],datetestarray[2]], // default min, max
  title: 'Select Date Range for Review',
})

The reason I want this: I have broken arrays of dates for which events of interest occurred, and it’s no use letting the user select or see dates when nothing occurred. Hope that make sense. Appreciate any advice!

1 Like
6

It’s not quite as straight forward, so I’ve created a helper:

2 Likes