Change value only on mouse up event with range sliders

[john-clarke]

For practice, I’m working on adding transitions to Mike’s Horizon Chart.

Here is my fork: https://beta.observablehq.com/d/bdf744850ca73dfe

I’ve resorted to using the “Submit” button option with @jashkenas’s inputs. This is a great start, but I want to improve the behavior by

1. updating the value to the right of the slider as you slide so you can see what number you’re about to submit before submitting it
2. replacing the submit button with a mouseup event and/or an event that fires after x milliseconds if the mouse button is still clicked but not released.

The issue in this case, is that the transitions can take a long time to process and we need a way to throttle changes to the input values to avoid an overload of transition requests.

I’ve tried to do this with a _.debounce function but the problem is that the function keeps getting updated with every change and thus defeating the purpose.

I also looked for a way to define a function as non-mutable, but couldn’t see how to do that.

[tom]

Hey John,

Sure - good question! Here’s a fork of Jeremy’s notebook that adds a cautious parameter to the range input type: https://beta.observablehq.com/@tmcw/inputs/2

The HTML5 range input doesn’t quite have an event that describes a user being ‘done’ using it, so this approximate such an event by waiting for keyup, mouseup, or touchend events and only updating the external value then - but updating the internal value preview immediately.

[john-clarke]

Hi Tom,

Awesome! I think that’s exactly what I need. Thank you for pointing it out to me.

It raises an idea/feature regarding forks. I suppose I could have somehow manually found and read all the forks – but it would be super useful to be able to search with in the scope of a base fork and/or a category/tag and then highlight any matches within the context of the search results. I guess something like what you see in a google search result.

Just an idea.

Cheers,

-John

[andreasplesch]

Here is a patched Inputs bazaar which shows the range value before you submit it, among other patches:

InputsAP

It may be still useful to you.

Post:

Patches for Input bazaar

If anybody or @jashkenas is interested I started to patch Inputs here: one idea is to allow for a style options key, intended for custom width first. I only put it in slider but could/should in any input I found it irritating for slider with submit button to have to wait until after submitting to know which value was submitted. After all, the point of the submit button is to avoid continuous updates and be more deliberate about submitting. I patched using the change event which works for me.…