elastic / elastic/eui

[EuiDualRange] Migrate from class to function component

Open
#9,492 3 comments 0 reactions 0 assignees View on GitHub
help wanted low hanging fruit
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

`EuiDualRange` provides a dual-handle range slider for selecting a value range. Supports tooltips, ticks, levels, and input fields.

- **File:** `components/form/range/dual_range.tsx`
- **Class size:** 513 lines
- **State:** `id`, `isPopoverOpen`, `rangeWidth`
- **Lifecycle:** None

**Migration notes:**

Largest single class component despite having no lifecycle methods. The complexity is in the extensive drag interaction logic, value clamping, and coordination between two range handles. No lifecycle simplifies migration but the sheer size requires careful review.

**Acceptance criteria:**

- [ ] Convert to function component with hooks
- [ ] Maintain dual-handle drag interaction
- [ ] Maintain value clamping and validation
- [ ] All existing tests pass

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.