# Linking Multiple Ranges

Created in response to the forum question [Synchronized Inputs range sliders](https://talk.observablehq.com/t/synchronized-inputs-range-sliders/7652).

-
A workaround to provide a multi-range input. Mostly a proof of concept, has some minor glitches.
+
A workaround to provide a multi-range input.

~~~js
import {linkRanges} from "c826aea92a8ae6d4"
~~~

function linkRanges(inputs) {
  const {min, max} = Math;
+
  const clamp = (a, b, v) => v < a ? a : v > b ? b : v;
  inputs.forEach((view, i, views) => {
    view.addEventListener("input", () => {
      let [a, b] = view.value;
      const p = views[i - 1];
      const n = views[i + 1];
-
      if(p) {
        p.value = [p.value[0], max(p.value[0], a)];
        b = max(b, a = p.value[1]);
      }
      if(n) {
        n.value = [min(b, n.value[1]), n.value[1]];
        a = min(a, b = n.value[0]);
      }
+
      const lo = p?.value[0] ?? -Infinity;
      const hi = n?.value[1] ?? Infinity;
      a = clamp(lo, hi, a);
      b = clamp(lo, hi, b);
      if(p) p.value = [lo, max(lo, a)];
      if(n) n.value = [min(b, hi), hi];
      view.value = [a, b];
    });
  });
  return inputs;
}