js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

only show one tooltip in range mode; fixes #1320

Browse Source
This commit is contained in:
Cory LaViska
2025-10-14 14:13:25 -04:00
parent 3c0924fac2
commit 2bf394cbcd
2 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -20,6 +20,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
- Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
- Fixed a bug that caused icon button labels to not render in frameworks [issue:1542]
- Fixed a bug in `<wa-details>` that caused the `name` property not to reflect [pr:1538]
- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
## 3.0.0-beta.6

29
packages/webawesome/src/components/slider/slider.ts
View File

@@ -99,7 +99,6 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
@query('#thumb-max') thumbMax: HTMLElement;
@query('#track') track: HTMLElement;
@query('#tooltip') tooltip: WaTooltip;
@queryAll('wa-tooltip') tooltips: NodeListOf<WaTooltip>;
/**
* The slider's label. If you need to provide HTML in the label, use the `label` slot instead.
@@ -688,19 +687,29 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
}
private showRangeTooltips() {
if (this.withTooltip) {
this.tooltips.forEach(tooltip => {
tooltip.open = true;
});
if (!this.withTooltip) return;
// Show only the active tooltip, hide the other
const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
if (this.activeThumb === 'min') {
if (tooltipMin) tooltipMin.open = true;
if (tooltipMax) tooltipMax.open = false;
} else if (this.activeThumb === 'max') {
if (tooltipMax) tooltipMax.open = true;
if (tooltipMin) tooltipMin.open = false;
}
}
private hideRangeTooltips() {
if (this.withTooltip) {
this.tooltips.forEach(tooltip => {
tooltip.open = false;
});
}
if (!this.withTooltip) return;
const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
if (tooltipMin) tooltipMin.open = false;
if (tooltipMax) tooltipMax.open = false;
}
/** Updates the form value submission for range sliders */