Linked sliders (title padding)

Community Help
1

I’m so sure I’ve seen this done before, but I can’t find it or figure it out myself:

I want to have multiple input sliders that act on the same underlying value. I.e., I have some viewof N = slider(...), and then I want to have another, but such that they both update each other accordingly.

If I just do:

M = {
  const input = slider(...);
  (viewof N).addEventListener("input", () => input.value = (viewof N).valueAsNumber);
  return input;
}

…then sliding N doesn’t visually update M (although of course the value is indeed set, and Observable notices this).

2

Hey Kelley,

Mike has a great tutorial on this topic:

In short — to avoid the circularity, you use your own event listeners.

An alternative way to do it, that may or may not be cleaner for your use case, is to have both views mutate and observe an external mutable cell.

3

It’s possible there is an easier way to do this. But anyway, my method using Mike’s View class is along the lines of …

viewof slider_view = new View(127)

then

slider1 = {
  const slider = html`<input type=range name=r min=0 max=255 step=1>`;
  
  slider.oninput = () => viewof slider_value.value = slider.valueAsNumber;
  const update = () => slider.value = viewof slider_value.value;
  
  viewof slider_value.addEventListener("input", update);
  return Generators.disposable(slider, () => {
    viewof slider_value.removeEventListener("input", update);
  });
}
4

Thanks :slight_smile:

Yeah, somehow I thought it should have been / was easier; but thanks for building this solution for me, I really didn’t feel up to it.

(In action: https://beta.observablehq.com/@kelleyvanevert/the-kolakoski-sequence .)

5

I’ve been using this kind of thing in my project of the past few weeks,

which still has a couple open research questions to solve and a good amount more explanation to write before it is fully baked (even if my work time wasn’t in units of ‘naptime’, we are traveling the next few weeks), so will probably not be published for another month or something.

2 Likes
6

Just a side note, but @jrus — that draft is looking extremely cool.

2 Likes
7

Yes, indeed :smiley:

(padding text)