What is the best way to make range slider update only on release?

Community Help
1

I was wondering what is currently the best way to update from an Inputs.range slider only on ‘release’ of the slider?

I see this cautious input example that uses the pre-Inputs version of a slider. Is this the way to go or are there better, possibly more compact approaches?

2

I would consider upvoting this issue:

Here’s a snippet you can use for a similar “cautious” range input:

viewof x = Object.assign(Inputs.range(), {
  oninput: event => event.isTrusted && event.stopImmediatePropagation(),
  onchange: event => event.currentTarget.dispatchEvent(new Event("input"))
})
3 Likes
3

Thanks very much. Edited: Removed earlier response that suggested options were being ignored (stupid mistake on my part in placing the options in the wrong object).

1 Like
4

works for me? updateOnRelease

1 Like
5

@mootari, @Job and I ended up writing a reusable wrapper for the usecase where you want to click a button to send forth the value(s).

Composing viewofs with the view literal / Tom Larkworthy / Observable (it fuses some of the ideas here too, note thats a link to the cautious section within the notebook)

1 Like
6

Building on this, is it possible to distinguish continuous slider events from those dispatched on release? My use case is the wish to update a cell to provide some rapid visual feedback on standard live update of a slider and then update a more computationally expensive cell only on slider release.

I am not sufficiently familiar with the Observable event model to know if this would be possible, but I think it would be very useful if it was.

7

@jwoLondon Yes, you can create a Generator cell that updates on change events:

// Generic helper
function onchange(input) {
  return Generators.observe(change => {
    const onchange = () => change(input.value);
    input.addEventListener('change', onchange);
    change(input.value);
    return () => input.removeEventListener('change', onchange);
  });
}

// Example input
viewof range = Inputs.range()

// Updates only on change
changed = onchange(viewof range)
2 Likes