Show slider tick labels on hover #12367
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
✅ PR preview is ready!
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements a feature to show slider tick labels (min/max values) on hover, improving user experience by providing visual feedback when interacting with sliders.
- Adds hover state management to show/hide tick labels with smooth transitions
- Implements a new
SliderTickBarcomponent to display formatted min/max values - Includes comprehensive test coverage for both unit and e2e scenarios
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/lib/src/components/widgets/Slider/styled-components.ts | Adds styled component for tick bar with hover-based opacity transitions |
| frontend/lib/src/components/widgets/Slider/Slider.tsx | Implements hover state management and SliderTickBar component integration |
| frontend/lib/src/components/widgets/Slider/Slider.test.tsx | Adds unit tests for tick bar visibility behavior on hover and keyboard interaction |
| e2e_playwright/st_slider_test.py | Adds e2e test for slider tick bar visibility with snapshot testing |
| e2e_playwright/st_select_slider_test.py | Adds e2e test for select slider tick bar visibility with snapshot testing |
There was a problem hiding this comment.
It is expected that the labels will be cut off in the snapshot since they are positioned outside of the slider boundaries. This also has the small benefit of ensuring that the placement is correct.
| data-testid="stSlider" | ||
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)} | ||
| style={{ position: "relative" }} |
There was a problem hiding this comment.
suggestion: This should be leveraging styled-components.
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)} |
There was a problem hiding this comment.
suggestion (non-blocking): Stabilize these via useCallback to prevent unnecessary re-renders.
| expect(tickBar).toBeVisible() | ||
|
|
||
| await user.unhover(sliderContainer) | ||
| expect(tickBar).not.toBeVisible() |
There was a problem hiding this comment.
question: Is it possible for these tests to flake due to timing issues?
Looks like opacity has a 70ms transition for opacity on it. If it's possible, then waitFor(() => expect(tickBar).not.toBeVisible()) would be preferred in all of these places that assert visibility state of the Tick Bar
There was a problem hiding this comment.
I think it might already work since it's an ease-in animation, so it's already visible in the first ms. But adding a waitFor here doesn't seem to hurt.
Describe your changes
Show the slider tick labels on hover:
Screen.Recording.2025-08-29.at.11.51.31.mov
Closes #12136
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.