feat: add range thumb slot
#1013
Conversation
|
@luwes is attempting to deploy a commit to the Mux Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1013 +/- ##
==========================================
- Coverage 78.55% 77.00% -1.56%
==========================================
Files 59 50 -9
Lines 11080 12132 +1052
Branches 0 705 +705
==========================================
+ Hits 8704 9342 +638
- Misses 2376 2764 +388
- Partials 0 26 +26 ☔ View full report in Codecov by Sentry. |
luwes
force-pushed
the
thumb-slot
branch
2 times, most recently
from
312537a
to
0f75a32
Compare
src/js/media-chrome-range.ts
Outdated
| @@ -172,14 +172,11 @@ template.innerHTML = /*html*/ ` | |||
| } | |||
| } | |||
|
|
|||
| #thumb { | |||
| #thumb, | |||
| ::slotted([slot=thumb]) { | |||
| width: var(--media-range-thumb-width, 10px); | |||
| height: var(--media-range-thumb-height, 10px); | |||
| margin-left: calc(var(--media-range-thumb-width, 10px) / -2); | |||
There was a problem hiding this comment.
I guess we need to keep height/width in here because of this placement math, but that feels like it'll be annoying. Is there any other CSS magic we could use where the margin could be based off whatever width the thumb happens to be?
There was a problem hiding this comment.
this worked via a CSS translate (or transform) with -50% since it's relative to itself. not to the parent like position absolute...
adds a
thumbslot for range elements.this is required for some CSS features like animations because the declared keyframes have to be in the same scope as the element to which they are applied.