Show slide position in seek-slider yellow strip

[Copilot]

This PR implements a UI improvement that shows the current slide position on the sliderHoverStrip element using a two-color gradient:

• Yellow (left of the current position) indicates progress/slides already viewed
• White (right of the current position) indicates remaining slides

The hover strip now updates in real-time when the user drags the seek-slider, not just when the slide changes.

Additional Improvements

• Yellow slider track: The seek slider track now also displays the same yellow/white gradient for visual consistency with the hover strip
• Custom slider thumb: Styled with yellow color and white border to match the overall theme
• Fixed jittering: Consolidated event handlers to prevent jitter when pulling down the seek slider by removing conflicting mouse event listeners from overlapping elements
• Colinear alignment: Aligned the right edges of the hover strip and seek slider for a cleaner visual appearance
• CSS custom properties: Added --slider-progress-color and --slider-remaining-color variables for easier color maintenance

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Show slide position in seek-slider yellow strip</issue_title>
<issue_description>A nice user interface improvement would be to show the current slide position on the sliderHoverStrip. This should be done using the same calculation used to position the thumb of the seek-slider itself. The position should be indicated by a color change in the sliderHoverStrip line. Everything to the left of the current slide position should be yellow. Everything to the right should be white. When the user changes the current slide, the sliderHoverStrip should update accordingly.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Show slide position in seek-slider yellow strip #134

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[lstein]

@copilot The slider-hover-strip should update when the slide position is set using the seek-slider. Currently it does not.

[Copilot]

@copilot The slider-hover-strip should update when the slide position is set using the seek-slider. Currently it does not.

Fixed in b3a1224. The hover strip now updates when:

• User drags the seek-slider (onSliderInput)
• User releases the seek-slider (onSliderChange)

Modified updateHoverStripProgress() to accept an optional slider value parameter for real-time updates during seeking.

[lstein]

@copilot Looks very good. Three minor aesthetic change requests:

1. Make the left-hand side of the seek slider widget yellow rather than dark gray currently used. This will ensure visual consistency between the hoverStrip and the slider.
2. When pulling down the seek slider there is an intermediate vertical position of the mouse cursor that causes the slider to jitter up and down. It's possibly caused by two competing events. Could you figure out what's causing this and fix it?
3. The right end of the hoverStrip is slightly farther to the right than the right end of the seek slider. Please make the hoverStrip and the seek slider colinear.

[Copilot]

@copilot Looks very good. Three minor aesthetic change requests:

1. Make the left-hand side of the seek slider widget yellow rather than dark gray currently used. This will ensure visual consistency ...

Fixed in 367c2db:

1. Yellow slider track - Added custom CSS styling for the range input track with yellow (left of thumb) and white (right of thumb), matching the hover strip gradient. Also styled the thumb to be yellow with a white border.

2. Fix jittering - Consolidated event handlers to only use scoreSliderRow for mouse events, removing conflicting handlers from hoverZone and sliderContainer. Added a 150ms delay before hiding (scheduleHide) to prevent rapid show/hide toggling during the animation.

3. Colinear alignment - Removed the margin-right: 20px from .slider-with-ticks-container so the slider right edge aligns with the hover strip.

Also added CSS custom properties (--slider-progress-color, --slider-remaining-color) for easier color maintenance.

[lstein]

Jittering is not completely fixed, but much better. Other issues addressed to my satisfaction.