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

**URL:** <https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112>\
**Category:** Help\
**Created:** [May 26, 2021, 11:24am UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112 "2021-05-26T11:24:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [May 26, 2021, 11:24am UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112/1 "2021-05-26T11:24:18Z")

</div>

I was wondering what is currently the best way to update from an [Inputs.range slider](https://observablehq.com/@observablehq/input-range) only on ‘release’ of the slider?

I see this [cautious input example](https://observablehq.com/@tmcw/inputs/2) that uses the pre-Inputs version of a slider. Is this the way to go or are there better, possibly more compact approaches?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 27, 2021, 2:06am UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112/2 "2021-05-27T02:06:02Z")

</div>

I would consider upvoting this issue:

> <https://github.com/observablehq/inputs/issues/40>
>
> As with text #9, we might want an explicit submit option here.

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

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

```

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [May 27, 2021, 5:00am UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112/3 "2021-05-27T05:00:54Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [May 27, 2021, 11:37am UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112/4 "2021-05-27T11:37:46Z")

</div>

works for me? [updateOnRelease](https://observablehq.com/@tomlarkworthy/community-help#updateOnRelease)

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [May 27, 2021, 7:03pm UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112/5 "2021-05-27T19:03:10Z")

</div>

@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](https://observablehq.com/@tomlarkworthy/view#cautious) (it fuses some of the ideas here too, note thats a link to the cautious section within the notebook)

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [January 22, 2022, 1:27pm UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112/6 "2022-01-22T13:27:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 27, 2022, 1:36pm UTC](https://talk.observablehq.com/t/what-is-the-best-way-to-make-range-slider-update-only-on-release/5112/7 "2022-01-27T13:36:08Z")

</div>

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

```javascript
// 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);
  });
}

```

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

```

```javascript
// Updates only on change
changed = onchange(viewof range)

```