QuantData time slider proxy

slider_proxy.js

(function createProxySlider() {
  // 1. Create a container for our "proxy" slider and place it top-left
  const container = document.createElement('div');
  container.style.position = 'fixed';
  container.style.top = '20px';
  container.style.left = '20px';
  container.style.padding = '10px';
  container.style.backgroundColor = 'white';
  container.style.border = '1px solid #ccc';
  container.style.zIndex = 999999; // make sure it's on top of everything
  container.style.fontFamily = 'sans-serif';
  container.style.color = '#333';

  // 2. Create a label
  const label = document.createElement('span');
  label.textContent = 'Proxy Slider (0–1440): ';
  container.appendChild(label);

  // 3. Create the actual range input
  const proxySlider = document.createElement('input');
  proxySlider.type = 'range';
  proxySlider.min = '0';
  proxySlider.max = '1440';
  proxySlider.value = '0'; // start at 0
  container.appendChild(proxySlider);

  // 4. A readout to show the current numeric value
  const readout = document.createElement('span');
  readout.style.marginLeft = '8px';
  readout.textContent = '0';
  container.appendChild(readout);

  // Insert the container into the page
  document.body.appendChild(container);

  // 5. Helper: dispatch mouse events to move Mantine sliders
  function dragSliderWithMouse(trackElement, fraction) {
    // fraction between 0 -> 1
    const rect = trackElement.getBoundingClientRect();
    const x = rect.left + rect.width * fraction;
    const y = rect.top + rect.height / 2;

    const down = new MouseEvent('mousedown', {
      clientX: x,
      clientY: y,
      bubbles: true,
      cancelable: true
    });
    const move = new MouseEvent('mousemove', {
      clientX: x,
      clientY: y,
      bubbles: true,
      cancelable: true
    });
    const up = new MouseEvent('mouseup', {
      clientX: x,
      clientY: y,
      bubbles: true,
      cancelable: true
    });

    trackElement.dispatchEvent(down);
    trackElement.dispatchEvent(move);
    trackElement.dispatchEvent(up);
  }

  // 6. Move ALL Mantine sliders to the chosen value
  function moveAllMantineSliders(desiredValue) {
    // Collect all slider track elements
    const trackEls = document.querySelectorAll('.mantine-Slider-track');
    trackEls.forEach((trackEl) => {
      // For each track, find its thumb to read min/max
      const thumbEl = trackEl.querySelector('.mantine-Slider-thumb');
      if (!thumbEl) return;

      const minVal = parseFloat(thumbEl.getAttribute('aria-valuemin') || '0');
      const maxVal = parseFloat(thumbEl.getAttribute('aria-valuemax') || '100');

      // Convert desiredValue -> fraction
      const fraction = (desiredValue - minVal) / (maxVal - minVal);

      // Dispatch mouse events
      dragSliderWithMouse(trackEl, fraction);
    });
  }

  // 7. Listen to changes on our proxy slider
  proxySlider.addEventListener('input', (e) => {
    const val = Number(e.target.value);
    readout.textContent = val; // update readout
    moveAllMantineSliders(val);
  });
})();