Function createDataZoomSlider

src/components/createDataZoomSlider.ts:30–321

(
  container: HTMLElement,
  zoomState: ZoomState,
  options?: DataZoomSliderOptions
)

type DragMode = 'left-handle' | 'right-handle' | 'pan-window';

export function createDataZoomSlider(
  container: HTMLElement,
  zoomState: ZoomState,
  options?: DataZoomSliderOptions
): DataZoomSlider {
  const height = options?.height ?? 32;
  const marginTop = options?.marginTop ?? 8;
  const zIndex = options?.zIndex ?? 4;
  const showPreview = options?.showPreview ?? false;

  const root = document.createElement('div');
  root.style.display = 'block';
  root.style.width = '100%';
  root.style.height = `${height}px`;
  root.style.marginTop = `${marginTop}px`;
  root.style.boxSizing = 'border-box';
  root.style.position = 'relative';
  root.style.zIndex = `${zIndex}`;
  root.style.userSelect = 'none';
  root.style.touchAction = 'none';

  // track: full-width bar that hosts preview + window selection.
  const track = document.createElement('div');
  track.style.position = 'relative';
  track.style.height = '100%';
  track.style.width = '100%';
  track.style.boxSizing = 'border-box';
  track.style.borderRadius = '8px';
  track.style.borderStyle = 'solid';
  track.style.borderWidth = '1px';
  track.style.overflow = 'hidden';
  root.appendChild(track);

  // preview: miniature context under the selection (optional; can be a solid bar for now).
  const preview = document.createElement('div');
  preview.style.position = 'absolute';
  preview.style.inset = '0';
  preview.style.pointerEvents = 'none';
  preview.style.opacity = '0.4';
  preview.style.display = showPreview ? 'block' : 'none';
  track.appendChild(preview);

  // window: the selected range.
  const windowEl = document.createElement('div');
  windowEl.style.position = 'absolute';
  windowEl.style.top = '0';
  windowEl.style.bottom = '0';
  windowEl.style.left = '0%';
  windowEl.style.width = '100%';
  windowEl.style.boxSizing = 'border-box';
  windowEl.style.cursor = 'grab';
  track.appendChild(windowEl);

  // left/right handles.
  const leftHandle = document.createElement('div');
  leftHandle.style.position = 'absolute';
  leftHandle.style.left = '0';
  leftHandle.style.top = '0';