# Trigger a function from a radio input

**URL:** <https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103>\
**Category:** Help\
**Created:** [January 20, 2022, 12:04pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103 "2022-01-20T12:04:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 20, 2022, 12:04pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/1 "2022-01-20T12:04:01Z")

</div>

Is there a way to trigger a function from Inputs.radio

```auto
Inputs.button([
  [
    "Get range from variable",
    () => (mutable rangeValues = [rangeVariable.min, rangeVariable.max])
  ]
])

```

The pratical case is visible from [WMS Leaflet map / Patrick Brockmann / Observable](https://observablehq.com/@pbrockmann/wms-gca)

I must admit that building an interface is not as easy as expected. Circular definitions,  
use of mutable. I try…

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [January 20, 2022, 1:57pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/2 "2022-01-20T13:57:58Z")

</div>

I’ve just sent you a suggestion with a clearer dataflow (I think), not using mutable

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 20, 2022, 2:08pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/3 "2022-01-20T14:08:46Z")

</div>

Seems nice and simpler but not expected behaviour when “user choice” is requested.  
The range is always from variable.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [January 20, 2022, 4:36pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/4 "2022-01-20T16:36:54Z")

</div>

It seems to works for me. Maybe I didn’t understand the expectations?

[https://dl.dropboxusercontent.com/s/b2qse49ks242lyi/video-2022-01-20.mov?dl=0](https://dl.dropboxusercontent.com/s/b2qse49ks242lyi/video-2022-01-20.mov?dl=0)

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 20, 2022, 5:24pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/5 "2022-01-20T17:24:05Z")

</div>

When the range is user choice, changing of variable should not change the range used.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [January 20, 2022, 6:22pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/6 "2022-01-20T18:22:05Z")

</div>

I can make another suggestion

```auto
viewof rangeValues = {
  const range0 = (this && rangeFrom === "user choice") ? this.value : rangeVariable
  return rangeSlider({
    min: Math.floor(rangeVariable[0] * 1.2),
    max: Math.ceil(rangeVariable[1] * 1.2),
    step: Math.abs(rangeVariable[1] - rangeVariable[0]) / 1000,
    value: range0,
    precision: 3,
    title: "",
    description: "Range"
  });
}

```

But it feels surprising because the three different variables don’t cover the same domains.

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 20, 2022, 6:34pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/7 "2022-01-20T18:34:07Z")

</div>

same domains ? Same range of values you mean ?  
yes it could be.

I have solved the https self signed certificate issue.  
I have coded from your suggestion:

```auto
viewof rangeValues = {
  const range0 =
    this && rangeFrom === "user choice" ? this.value : rangeVariable;
  return rangeSlider({
    min: Math.floor(range0[0] * 1.2),
    max: Math.ceil(range0[1] * 1.2),
    step: Math.abs(range0[1] - range0[0]) / 1000,
    value: range0,
    precision: 0,
    title: "",
    description: "Range"
  });
}

```

I think this is good now.

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 20, 2022, 10:10pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/8 "2022-01-20T22:10:18Z")

</div>

Unfortunately. No.  
The range0 is not correctly saved.

The typical sequence.  
Load. Check “user choice”, then alternate between the 2 first variables (fossil and Terrestrial\_flux).  
The console shows that the range0 changes each times.  
Don’t understand why.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [January 21, 2022, 8:03am UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/9 "2022-01-21T08:03:21Z")

</div>

The thing is that the \<min, max\> bracket is set as 1.2\*range0[0] etc. This only works if range0[0] is negative and range0[1] positive. If that’s not the case, then the range is not included in the bracket, and the selection is restricted to the new bracket. Another thing is that the step changes each time, introducing small differences in the values.

Here’s a way to fix all these (I think):

```auto
viewof range = {
  const range0 =
    this && rangeFrom === "user choice" ? this.value : rangeVariable;
  console.log(range0);
  return rangeSlider({
    min: Math.min(range0[0], Math.floor(range0[0] * 1.2)),
    max: Math.max(range0[1], Math.ceil(range0[1] * 1.2)),
    step: 10 ** Math.floor(Math.log10(Math.abs(range0[1] - range0[0]) / 1000.0)),
    value: range0,
    precision: 1,
    title: "<div style='font-weight:normal;font-size: smaller;'>Range</div>"
  });
}

```

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 21, 2022, 12:48pm UTC](https://talk.observablehq.com/t/trigger-a-function-from-a-radio-input/6103/10 "2022-01-21T12:48:22Z")

</div>

Hi,  
This makes me mad…  
Indeed there was a mistake into min and max calculs.

```auto
    min: Math.floor(range0[0] - Math.abs(range0[0]) * 0.2),
    max: Math.ceil(range0[1] + Math.abs(range0[1]) * 0.2),

```

should be correct.  
But even with this and setting the step to a fix value, there  
is a drift I do not understand.

Load the actual notebook, choose the “user choice” then alternate  
between first 2 variables. The min, max moves since the range0 is not the  
same. This is what puzzles me.

Ok you were ok with your solution. Adopted.  
Step parameter needs to be integer I think otherwise there is a unexpected drift.