Split Pane: Implement a UI Split Pane Component With Draggable Divider and Min/Max Constraints

Question

## Problem

Build a split pane UI component in JavaScript/TypeScript. The component divides a container into two resizable panels separated by a draggable divider. Each panel has a `minSize` (px) and optionally a `maxSize`. The divider cannot be dragged past these constraints.

```typescript
class SplitPane {
  constructor(
    container: HTMLElement,
    direction: 'horizontal' | 'vertical',
    options: {
      initialSplit: number,  // 0-1, fraction for first pane
      minSizes: [number, number],
      maxSizes?: [number | null, number | null]
    }
  ) {}

setSplit(fraction: number): void {}
  getSplit(): number {}
  onResize(callback: (fraction: number) => void): void {}
}
```

**Example behavior:**
```
const pane = new SplitPane(container, 'horizontal', {
  initialSplit: 0.5, minSizes: [100, 100]
});
// User drags divider left; pane A shrinks to minSize=100px and stops
```

## Follow-ups

1. Which mouse/touch events do you attach and where — on the divider, document, or container?
2. How do you handle resize of the outer container (e.g., browser window resize) without violating constraints?
3. How would you persist the split position in localStorage and restore it on load?
4. Extend to a three-panel layout — what data structure represents nested splits?

Split Pane: Implement a UI Split Pane Component With Draggable Divider and Min/Max Constraints

Question Details

Full Details

About This Question

Topics

More Warp Interview Questions