DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(slider): border should only appear when handle nubs are overlapping

Browse Source 
PiperOrigin-RevId: 565179716
This commit is contained in:
Andrew Jakubowicz 2023-09-13 15:32:04 -07:00 committed by Copybara-Service
parent 70bfea8738
commit 6e72a8e5f4
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
slider/internal/slider.ts
View File

@ -334,7 +334,11 @@ export class Slider extends LitElement {
}
if (changed.has('range') || changed.has('renderValueStart') ||
changed.has('renderValueEnd') || this.isUpdatePending) {
this.handlesOverlapping = isOverlapping(this.handleStart, this.handleEnd);
// Only check if the handle nubs are overlapping, as the ripple touch
// target extends subtantially beyond the boundary of the handle nub.
const startNub = this.handleStart?.querySelector('.handleNub');
const endNub = this.handleEnd?.querySelector('.handleNub');
this.handlesOverlapping = isOverlapping(startNub, endNub);
}
// called to finish the update imediately;
// note, this is a no-op unless an update is scheduled
@ -741,7 +745,8 @@ function inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {
return x >= left && x <= right && y >= top && y <= bottom;
}
function isOverlapping(elA: Element|null, elB: Element|null) {
function isOverlapping(
elA: Element|null|undefined, elB: Element|null|undefined) {
if (!(elA && elB)) {
return false;
}